diff --git a/services/web/app/views/project/editor/left-menu.jade b/services/web/app/views/project/editor/left-menu.jade index b15afdeace..b6209b8095 100644 --- a/services/web/app/views/project/editor/left-menu.jade +++ b/services/web/app/views/project/editor/left-menu.jade @@ -3,75 +3,90 @@ aside#left-menu.full-size( ng-cloak ) h4 Settings - form(ng-controller="SettingsController") - .form-controls - label(for="compiler") Compiler - select.form-control( - name="compiler" - ng-model="project.compiler" - ) - option(value='pdflatex') pdfLaTeX - option(value='latex') LaTeX - option(value='xelatex') XeLaTeX - option(value='lualatex') LuaLaTeX + form.settings(ng-controller="SettingsController") + .containter-fluid + .form-controls + .row + label.col-md-6(for="compiler") Compiler + .col-md-6 + select.form-control( + name="compiler" + ng-model="project.compiler" + ) + option(value='pdflatex') pdfLaTeX + option(value='latex') LaTeX + option(value='xelatex') XeLaTeX + option(value='lualatex') LuaLaTeX - .form-controls - label(for="spellCheckLanguage") Spell Check - select.form-control( - name="spellCheckLanguage" - ng-model="project.spellCheckLanguage" - ) - option(value="") Off - optgroup(label="Language") - for language in languages - option( - value=language.code - )= language.name + .form-controls + .row + label.col-md-6(for="spellCheckLanguage") Spell Check + .col-md-6 + select.form-control( + name="spellCheckLanguage" + ng-model="project.spellCheckLanguage" + ) + option(value="") Off + optgroup(label="Language") + for language in languages + option( + value=language.code + )= language.name - .form-controls - label(for="autoComplete") Auto-Complete - input.form-control( - type="checkbox" - name="autoComplete" - ng-model="settings.autoComplete" - ) + .form-controls + .row + label.col-md-6(for="autoComplete") Auto-Complete + .col-md-6 + input.form-control( + type="checkbox" + name="autoComplete" + ng-model="settings.autoComplete" + ) - .form-controls - label(for="theme") Theme - select.form-control( - name="theme" - ng-model="settings.theme" - ) - each theme in themes - option(value=theme) #{theme} - - .form-controls - label(for="mode") Keybindings - select.form-control( - name="mode" - ng-model="settings.mode" - ) - option(value='default') None - option(value='vim') Vim - option(value='emacs') Emacs + .form-controls + .row + label.col-md-6(for="theme") Theme + .col-md-6 + select.form-control( + name="theme" + ng-model="settings.theme" + ) + each theme in themes + option(value=theme) #{theme} - .form-controls - label(for="fontSize") Font Size - select.form-control( - name="fontSize" - ng-model="settings.fontSize" - ) - each size in ['10','11','12','13','14','16','20','24'] - option(value=size) #{size}px + .form-controls + .row + label.col-md-6(for="mode") Keybindings + .col-md-6 + select.form-control( + name="mode" + ng-model="settings.mode" + ) + option(value='default') None + option(value='vim') Vim + option(value='emacs') Emacs - .form-controls - label(for="pdfViewer") PDF Viewer - select.form-control( - name="pdfViewer" - ng-model="settings.pdfViewer" - ) - option(value="pdfjs") Built-In - option(value="native") Native + .form-controls + .row + label.col-md-6(for="fontSize") Font Size + .col-md-6 + select.form-control( + name="fontSize" + ng-model="settings.fontSize" + ) + each size in ['10','11','12','13','14','16','20','24'] + option(value=size) #{size}px + + .form-controls + .row + label.col-md-6(for="pdfViewer") PDF Viewer + .col-md-6 + select.form-control( + name="pdfViewer" + ng-model="settings.pdfViewer" + ) + option(value="pdfjs") Built-In + option(value="native") Native #left-menu-mask( ng-show="ui.leftMenuShown", diff --git a/services/web/public/stylesheets/app/editor/left-menu.less b/services/web/public/stylesheets/app/editor/left-menu.less index caaec20461..140d70e9fb 100644 --- a/services/web/public/stylesheets/app/editor/left-menu.less +++ b/services/web/public/stylesheets/app/editor/left-menu.less @@ -1,14 +1,16 @@ #left-menu { position: absolute; - width: 210px; - padding: 10px; + width: 260px; + padding: (@line-height-computed / 2); top: 0; bottom: 0; background-color: #f4f4f4; z-index: 100; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; -webkit-transition: left ease-in-out 0.35s; transition: left ease-in-out 0.35s; + font-size: 14px; left: -280px; &.shown { @@ -16,14 +18,48 @@ } h4 { - font-family: @font-family-serif; + font-family: @font-family-sans-serif; font-weight: 400; font-size: 1rem; margin: (@line-height-computed / 2) 0; padding-bottom: (@line-height-computed / 4); color: @gray-light; - border-bottom: 1px solid @gray-light; - text-transform: uppercase; + border-bottom: 1px solid @gray-lighter; + } + + h4:first-child { + margin-top: 0; + } + + form.settings { + label { + font-weight: normal; + color: @gray-dark; + margin-bottom: 0; + padding-top: 8px; + } + select.form-control { + height: 34px; + background: none; + border: none; + box-shadow: none; + color: @link-color; + cursor: pointer; + font-size: 14px; + font-weight: 700; + } + .form-controls { + padding: 0 (@line-height-computed / 4); + &:hover { + background-color: @link-color; + select.form-control { + color: white; + } + label { + color: white; + } + } + } } }