r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

formatting of dropdown login and editor menus (#239)

Browse source 
* removing avenir font, using montserrat instead due to licensing issues

* removing old import statement for typeography scss file

* dropdown formatting closes #210
This commit is contained in:
Lauren McCarthy 2016-12-19 21:21:04 -08:00 committed by Cassie Tarakajian
parent 5de2a6761f
commit 28323ffc09
7 changed files with 93 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
client/components/Nav.jsx
View file

@ -120,9 +120,12 @@ function Nav(props) {
<li className="nav__item">
<a>Hello, {props.user.username}!</a>
<ul className="nav__dropdown">
<li className="nav__dropdown-heading">
<a>Hello, {props.user.username}!</a>
</li>
<li>
<Link to="/sketches">
My Sketches
My sketches
</Link>
</li>
<li>

2
client/modules/IDE/components/Editor.jsx
View file

@ -230,7 +230,7 @@ class Editor extends React.Component {
<a onClick={this.tidyCode}>Tidy</a>
</li>
<li>
<a onClick={this.props.showKeyboardShortcutModal}>Keyboard Shortcuts</a>
<a onClick={this.props.showKeyboardShortcutModal}>Keyboard shortcuts</a>
</li>
</ul>
<div ref="container" className="editor-holder" tabIndex="0">

4
client/modules/IDE/components/Sidebar.jsx
View file

@ -49,12 +49,12 @@ class Sidebar extends React.Component {
<ul className="sidebar__project-options">
<li>
<a aria-label="add folder" onClick={this.props.newFolder} >
Add Folder
Add folder
</a>
</li>
<li>
<a aria-label="add file" onClick={this.props.newFile} >
Add File
Add file
</a>
</li>
</ul>

2
client/styles/abstracts/_variables.scss
View file

@ -25,7 +25,7 @@ $themes: (
button-background-active-color: #f10046,
button-hover-color: $white,
button-active-color: $white,
modal-background-color: #fdfdfd,
modal-background-color: #f4f4f4,
modal-button-background-color: #e6e6e6,
modal-border-color: #B9D0E1,
icon-color: #8b8b8b,

21
client/styles/components/_editor.scss
View file

@ -96,15 +96,28 @@
display: none;
@extend %modal;
position: absolute;
top: #{20 / $base-font-size}rem;
right: #{5 / $base-font-size}rem;
padding: #{10 / $base-font-size}rem;
right: #{0 / $base-font-size}rem;
padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
font-size: #{12 / $base-font-size}rem;
@include themify() {
background-color: getThemifyVariable('modal-background-color');
box-shadow: 0 0 18px getThemifyVariable('shadow-color');
}
.editor--options & {
display: block;
}
}
.editor__options li {
padding: #{4 / $base-font-size}rem 0;
}
.editor__options a {
@include themify() {
color: getThemifyVariable('secondary-text-color');
}
}
.editor__file-name {
@include themify() {
color: getThemifyVariable('secondary-text-color');

49
client/styles/components/_nav.scss
View file

@ -34,22 +34,22 @@
.nav__dropdown {
@include themify() {
background-color: map-get($theme-map, 'background-color');
border: 1px solid map-get($theme-map, 'ide-border-color');
background-color: map-get($theme-map, 'modal-background-color');
border: 1px solid map-get($theme-map, 'modal-border-color');
box-shadow: 0 0 18px getThemifyVariable('shadow-color');
}
@extend %hidden-element;
& li + li {
margin-top: #{10 / $base-font-size}rem;
}
text-align: left;
width: #{140 / $base-font-size}rem;
.nav__item:hover & {
display: flex;
position: absolute;
flex-direction: column;
padding: #{10 / $base-font-size}rem;
left: #{-10 / $base-font-size}rem;
top: #{-8 / $base-font-size}rem;;
left: #{-11 / $base-font-size}rem;
height: auto;
}
padding-bottom: #{8 / $base-font-size}rem;
}
.nav__item-spacer {
@ -58,3 +58,38 @@
}
padding: 0 #{15 / $base-font-size}rem;
}
.nav__dropdown li {
padding: #{4 / $base-font-size}rem #{16 / $base-font-size}rem;
width: 100%;
}
.nav__dropdown a {
@include themify() {
color: getThemifyVariable('secondary-text-color');
}
}
.nav__dropdown a:hover {
@include themify() {
color: getThemifyVariable('primary-text-color');
}
}
.nav__dropdown-heading {
@include themify() {
border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
}
margin-top: #{3 / $base-font-size}rem;
text-align: center;
margin-bottom: #{4 / $base-font-size}rem;
}
.nav__dropdown-heading a, .nav__dropdown-heading a:hover {
@include themify() {
color: getThemifyVariable('inactive-text-color');
}
cursor: default;
width: 100%;
}

29
client/styles/components/_sidebar.scss
View file

@ -128,20 +128,30 @@
@extend %modal;
@include themify() {
background-color: getThemifyVariable('modal-background-color');
box-shadow: 0 0 18px getThemifyVariable('shadow-color');
}
position: absolute;
top: 95%;
left: #{15 / $base-font-size}rem;
right: #{15 / $base-font-size}rem;
right: #{0 / $base-font-size}rem;
display: none;
z-index: 100;
padding: #{4 / $base-font-size}rem #{16 / $base-font-size}rem;
z-index: 100;
padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
.sidebar__file-item--open > .file-item__content & {
display: block;
}
}
.sidebar__project-options li, .sidebar__file-item-options li {
padding: #{4 / $base-font-size}rem 0;
}
.sidebar__project-options a, .sidebar__file-item-options a {
@include themify() {
color: getThemifyVariable('secondary-text-color');
}
}
.sidebar__file-item-input {
display: none;
padding: 0;
@ -235,17 +245,22 @@
.sidebar__project-options {
@extend %modal;
@include themify() {
background-color: getThemifyVariable('modal-background-color');
box-shadow: 0 0 18px getThemifyVariable('shadow-color');
}
display: none;
position: absolute;
.sidebar--project-options & {
display: block;
}
top: 100%;
right: #{-70 / $base-font-size}rem;
padding: #{4 / $base-font-size}rem;
width: #{110 / $base-font-size}rem;
top: #{22 / $base-font-size}rem;
right: #{-6 / $base-font-size}rem;
padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
width: #{145 / $base-font-size}rem;
}
.sidebar__file-item--closed .file-item__children {
display: none;
}