From 4f7b84194b056b5d6d9acca4cceb2cabc04fd8a5 Mon Sep 17 00:00:00 2001 From: luxagraf Date: Sat, 29 Dec 2018 08:37:39 -0600 Subject: cleaned up JS and made modal handler. --- design/sass/_forms.scss | 13 +- design/sass/_global.scss | 24 ++- design/sass/_modal.scss | 201 ++++++++++----------- design/sass/_notes.scss | 121 ++++++++++++- design/sass/screenv1.scss | 2 +- design/templates/base.html | 6 +- design/templates/notes/notebook_create.html | 36 ---- design/templates/notes/notebook_detail.html | 4 +- design/templates/notes/notebook_list.html | 55 ++++++ design/templates/notes/notes_create.html | 30 +-- design/templates/notes/notes_detail.html | 34 ++-- design/templates/notes/notes_list.html | 54 ++++-- design/templates/notes/notes_listold.html | 9 - design/templates/notes/partials/note_list.html | 6 +- design/templates/notes/partials/notebook_form.html | 19 ++ design/templates/pages/page.html | 11 -- 16 files changed, 398 insertions(+), 227 deletions(-) delete mode 100644 design/templates/notes/notebook_create.html create mode 100644 design/templates/notes/notebook_list.html delete mode 100644 design/templates/notes/notes_listold.html create mode 100644 design/templates/notes/partials/notebook_form.html (limited to 'design') diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss index cce0e0f..d8a6a03 100644 --- a/design/sass/_forms.scss +++ b/design/sass/_forms.scss @@ -148,6 +148,10 @@ table { } .btn-inline { display: inline; + width: auto; +} +.note-save { + float: right; } .form-narrow { margin: 0 auto; @@ -171,7 +175,14 @@ select { background: white; border-radius: 4px; } -#id_tags { +.note-detail #id_tags { @include fontsize(13); padding: 8px; } +#fs-notebook{ + label { + top: -1.5rem; + left: .25rem; + } + margin: 3rem 0 1.5rem; +} diff --git a/design/sass/_global.scss b/design/sass/_global.scss index 9ef2e99..b858866 100644 --- a/design/sass/_global.scss +++ b/design/sass/_global.scss @@ -90,7 +90,7 @@ blockquote:before { @include fontsize(68); content: '\201C'; position: absolute; - top: -1rem; + top: -1.35rem; left: 50%; transform: translate(-50%, -50%); width: 3rem; @@ -152,7 +152,7 @@ h3 { } } .wrapper { - @include constrain(1440px); + @include constrain(1280px); //margin-top: 5rem; } //************** Universals ************************ @@ -189,6 +189,12 @@ h3 { .right-padding-0 { padding-right: 0 !important; } +.top-margin-0 { + margin-top: 0 !important; +} +.bottom-margin-0 { + margin-bottom: 0 !important; +} .center { text-align: center; margin-right: auto; @@ -201,9 +207,15 @@ h3 { .vertical li { display: block; } +.block { + display: block; +} +.inline-block { + display: inline-block; +} .single-col { display: block; - @include constrain_narrow; + @include constrain(66%); } .wide{ display: block; @@ -212,6 +224,12 @@ h3 { .small > * { @include fontsize(14); } +.hed-small { + @include fontsize(22); + @include fancy_sans; + margin-bottom: .5rem; + margin-top: 2rem; +} //************** other global classes ************************ .sans { @include generic_sans; diff --git a/design/sass/_modal.scss b/design/sass/_modal.scss index 57a7e51..dd21816 100644 --- a/design/sass/_modal.scss +++ b/design/sass/_modal.scss @@ -1,112 +1,103 @@ -/** - * Component: Overlay - */ -/* BACKDROP */ -.novi-backdrop { - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 7000; - position: fixed; - overflow-x: hidden; - overflow-y: auto; - background: rgba(0, 0, 0, 0.75); - opacity: 0; - animation-name: fadeIn; - animation-duration: .4s; - animation-fill-mode: forwards; +#overlay{ + font-family:Lato; + position:fixed; + width:100vw; + height:100vh; + overflow:hidden; + top:0; + left:0; + right:0; + bottom:0; + animation:overlay .3s forwards ease; + background-color:rgba(0,0,0,.8); + transform:scale(1); + transform-origin:center center; + z-index: 2000; + display: block; + > div { + position:absolute; + top:50%; + left:50%; + transform:translate(-50%,-50%); + } + header{ + @include fancy_sans; + @include fontsize(18); + padding: 1rem 1rem 1rem 0; + margin-left: 0; + } } -/* OVERLAY */ -.novi-overlay { - text-align: center; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; +.top { + z-index: 10000; } -.novi-overlay:before { - content: ''; - display: inline-block; - height: 10%; - vertical-align: middle; -} -.novi-overlay__container { - width: 100%; - position: relative; - display: inline-block; - vertical-align: middle; - margin: 0 auto; - text-align: left; - z-index: 8000; - padding: 0 15px; -} -.novi-overlay__content { - position: relative; - background: #FFF; - padding: 40px; - width: auto; - margin: 15px auto; - width: 100%; - max-width: 700px; - animation-name: fadeZoomIn; - animation-duration: .4s; - opacity: 0; - animation-fill-mode: forwards; - animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); - border-radius: 8px; -} -.novi-overlay__content--video { - padding: 0; - height: 360px; -} -.novi-overlay__content--video .novi-overlay-close { - top: -25px; - right: 0; -} -/* CLOSE BUTTON */ -.novi-overlay-close { - padding: 0; - background: none; - position: absolute; - top: 15px; - right: 15px; - display: block; - width: 15px; - height: 15px; - z-index: 1; - border: 0; - background-size: 100%; - background-repeat: no-repeat; - background-position: 100% 0; - background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIxLjkgMjEuOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjEuOSAyMS45IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KICA8cGF0aCBkPSJNMTQuMSwxMS4zYy0wLjItMC4yLTAuMi0wLjUsMC0wLjdsNy41LTcuNWMwLjItMC4yLDAuMy0wLjUsMC4zLTAuN3MtMC4xLTAuNS0wLjMtMC43bC0xLjQtMS40QzIwLDAuMSwxOS43LDAsMTkuNSwwICBjLTAuMywwLTAuNSwwLjEtMC43LDAuM2wtNy41LDcuNWMtMC4yLDAuMi0wLjUsMC4yLTAuNywwTDMuMSwwLjNDMi45LDAuMSwyLjYsMCwyLjQsMFMxLjksMC4xLDEuNywwLjNMMC4zLDEuN0MwLjEsMS45LDAsMi4yLDAsMi40ICBzMC4xLDAuNSwwLjMsMC43bDcuNSw3LjVjMC4yLDAuMiwwLjIsMC41LDAsMC43bC03LjUsNy41QzAuMSwxOSwwLDE5LjMsMCwxOS41czAuMSwwLjUsMC4zLDAuN2wxLjQsMS40YzAuMiwwLjIsMC41LDAuMywwLjcsMC4zICBzMC41LTAuMSwwLjctMC4zbDcuNS03LjVjMC4yLTAuMiwwLjUtMC4yLDAuNywwbDcuNSw3LjVjMC4yLDAuMiwwLjUsMC4zLDAuNywwLjNzMC41LTAuMSwwLjctMC4zbDEuNC0xLjRjMC4yLTAuMiwwLjMtMC41LDAuMy0wLjcgIHMtMC4xLTAuNS0wLjMtMC43TDE0LjEsMTEuM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9zdmc+Cg==); +@keyframes modal{ + from{ + -webkit-transform: scale(0.5); + -moz-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + opacity: 0; + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + transition: all 0.4s; + }; + to{ + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + opacity: 1; + } } -.novi-overlay-close:hover, -.novi-overlay-close:focus, -.novi-overlay-close:active { - outline: none; - cursor: pointer; +@keyframes overlay{ + from{ + background-color:rgba(0,0,0,0); + }; + to{ + background-color:rgba(0,0,0,.8); + } } -/* HELPER CLASSES */ -.no-scroll { - overflow: hidden; +#overlay-wrapper { + max-width: 52%; + width: 90%; } -@keyframes fadeZoomIn { - from { - opacity: 0; - transform: scale(0.5) translateY(300px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } +#modal { + min-height: 330px; + padding: 0 1rem 1rem 1rem; + background-color: white; + border-radius: 4px; + overflow:hidden; + animation:modal .2s forwards ease; + -webkit-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5); + -moz-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5); + box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5); + + + & > div { + color: #424242; + background-color: white; + } + // specific fixes for notebook create form + #nb-create-form { width: 99%;} + .flex-wrapper { + display: block; + margin-top: .5rem; + #color-picker { + margin-top: 3rem; + margin-left: .25rem; + } + .nb-name { width: 100%;} + } + input[type="submit"] { + float: right; + } + } -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } +#hed-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + & > * { + width: auto; + } } diff --git a/design/sass/_notes.scss b/design/sass/_notes.scss index cde15a5..4ab42b4 100644 --- a/design/sass/_notes.scss +++ b/design/sass/_notes.scss @@ -85,7 +85,7 @@ main { font-weight: normal; overflow: hidden; white-space: nowrap; - color: $body_font_color; + color: darken($body_font_color, 10); } .notebook { padding-right: 8px; @@ -176,18 +176,20 @@ main { input { width: 200%; } + a { margin-right: .25rem;} } } .notebook { display: block; } .note-container { - max-width: 60%; + max-width: 70%; position: relative; flex:1; order: 2; background: #fff; z-index: 4; + margin: 0 auto; } #note-body { @include fancy-sans; @@ -211,14 +213,16 @@ main { font-size:inherit; } } -#user-menu, #notebooks-menu { +#user-menu, #notebooks-menu, #notebook-drop-menu, #tags-drop-menu { display: none; } .active { display: block !important; } .notebook-colored { - border-left: 3px solid #fff; + -webkit-background-clip: padding-box; /* for Safari */ + background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ + border-left: 3px solid rgba(255, 255, 255, .5); } .notebook-title { @include fontsize(24); @@ -249,6 +253,115 @@ main { cursor: pointer; } } +#nb-create-form { + .color-picker-fieldset { + width: 30px; + height: 30px; + label { + top: -25px; + width: 140px; + left: -5px; + } + } + .nb-name { + margin: 1rem 2rem 1rem 0; + width: 90%; +} +} +.small-circle { + width: 18px; + height: 18px; + margin-left: 6px; +} +.small-circle.plus:before { + width: 2px; + margin: 5px auto; +} +.small-circle.plus:after{ + margin: auto 5px; + width: 8px; +} + + +.url-field { + input { + @include fontsize(16); + color: $body_font_color; + } +} +.note-hed-wrapper { + margin-bottom: 1.5rem; +} +.note-hed { + @include fontsize(22); + margin-bottom: 0; +} +.note-subhed { + @include fontsize(16); + margin-top: 0; +} + +.nb-list { + display: flex; + flex-wrap: wrap; + align-items: center; + margin-top: 0; +} +.nb-list-item { + list-style-type: none; + padding: 2rem; + margin: 1rem; + flex-grow: 1; + border: 1px #e7e2ee solid; + border-radius: 4px; + min-width: 160px; +} +.color-picker-inner { + width: 100%; + height: 100%; +} + +.dropmenu-search { + margin: 0; + padding: 0; + .dropmenu-search-wrapper { + border-top: 1px solid #e9e9e9; + border-bottom: 1px solid #e9e9e9; + padding: 5px; + } + input { + @include fontsize(16); + padding: 4px; + width: auto; + border: none; + } + .dropmenu-list { + padding: 3px; + margin-top: 0; + max-height: 300px; + overflow-x: auto; + } + a { + display: block; + text-decoration: none; + padding: 4px 6px; + &:hover { + background: $link_color; + } + } +} + +.ql-snow .ql-editor blockquote { + border-left: none !important; + margin-bottom: 5px; + margin-top: 5px; + padding-left: none !important; + padding: 1rem .5rem; +} +.ql-container { + min-height: 300px; +} + /* Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull diff --git a/design/sass/screenv1.scss b/design/sass/screenv1.scss index d54027e..f3df73e 100644 --- a/design/sass/screenv1.scss +++ b/design/sass/screenv1.scss @@ -1,10 +1,10 @@ @import "_fonts.scss"; @import "_mixins.scss"; @import "_queries.scss"; +@import "_awesomeplete.scss"; @import "_global.scss"; @import "_header.scss"; @import "_footer.scss"; @import "_forms.scss"; @import "_modal.scss"; -@import "_breadcrumbs.scss"; @import "_notes.scss"; diff --git a/design/templates/base.html b/design/templates/base.html index 50749cb..fc369ae 100644 --- a/design/templates/base.html +++ b/design/templates/base.html @@ -15,6 +15,7 @@ + {% block jsinclude %}{%endblock%} @@ -22,7 +23,7 @@