From 09ae6712bbdbfda141e79b943c7d7725a8093a52 Mon Sep 17 00:00:00 2001 From: Sam Lu Date: Thu, 2 Aug 2018 00:20:05 -0500 Subject: [PATCH] Polish nav for all pages. Fix hover dropdowns, notification, profile menu --- src/styles/_footer.sass | 8 ++-- src/styles/_gallery.sass | 3 ++ src/styles/_jumbotron.sass | 3 ++ src/styles/_navbar-secondary.sass | 3 ++ src/styles/_navbar.sass | 56 ++++++++++++++++++++++- src/styles/{_base.sass => base.sass} | 10 ++-- src/styles/project-landing.sass | 15 ++++-- src/styles/projects-index-collection.sass | 14 ++++-- src/styles/welcome.sass | 29 ++++++++++++ src/templates/homepage.pug | 5 -- src/templates/layout.pug | 2 + src/templates/welcome.pug | 14 +++--- 12 files changed, 132 insertions(+), 30 deletions(-) rename src/styles/{_base.sass => base.sass} (57%) create mode 100644 src/styles/welcome.sass diff --git a/src/styles/_footer.sass b/src/styles/_footer.sass index 4e1dfb8..57a1573 100644 --- a/src/styles/_footer.sass +++ b/src/styles/_footer.sass @@ -1,11 +1,9 @@ +@import ../styles/colors +@import ../styles/breakpoints + footer.container-fluid background: #F8F8FB border-top: 1px solid #E3E3E6 - margin-top: 72px - +media-breakpoint-up(sm) - margin-top: 112px - +media-breakpoint-up(lg) - margin-top: 136px .container margin-top: 11px max-width: 1200px diff --git a/src/styles/_gallery.sass b/src/styles/_gallery.sass index bf8d0e1..c87a58b 100644 --- a/src/styles/_gallery.sass +++ b/src/styles/_gallery.sass @@ -1,3 +1,6 @@ +@import ../styles/colors +@import ../styles/breakpoints + .gallery .cta-arrow margin-top: 20px diff --git a/src/styles/_jumbotron.sass b/src/styles/_jumbotron.sass index d2ee337..8a83ab4 100644 --- a/src/styles/_jumbotron.sass +++ b/src/styles/_jumbotron.sass @@ -1,3 +1,6 @@ +@import ../styles/colors +@import ../styles/breakpoints + .jumbotron background-color: #fff background-repeat: no-repeat diff --git a/src/styles/_navbar-secondary.sass b/src/styles/_navbar-secondary.sass index 732bcde..c91ca98 100644 --- a/src/styles/_navbar-secondary.sass +++ b/src/styles/_navbar-secondary.sass @@ -1,3 +1,6 @@ +@import ../styles/colors +@import ../styles/breakpoints + .nav-scroller position: relative z-index: 2 diff --git a/src/styles/_navbar.sass b/src/styles/_navbar.sass index ecf74fa..871ec0f 100644 --- a/src/styles/_navbar.sass +++ b/src/styles/_navbar.sass @@ -1,3 +1,6 @@ +@import ../styles/colors +@import ../styles/breakpoints + nav.navbar background: #fff height: auto @@ -19,6 +22,8 @@ nav.navbar .navbar-toggler padding: 0 border-radius: 0 + &:hover + background: none .navbar-nav margin-bottom: 15px margin-top: 15px @@ -29,10 +34,37 @@ nav.navbar .special top: 10px left: 35px + a.navbar-item.active, + a.navbar-item.active:hover, + a.navbar-item:hover + box-shadow: none + li:last-of-type + // profile menu + .dropdown-menu + right: 0 + left: auto + min-width: 10rem + padding: .5rem 0 + margin: -1px 0 0 + font-size: 1rem + color: #111 + text-align: left + list-style: none + background-color: #fff + background-clip: padding-box + border: 1px solid rgba(0,0,0,.15) + border-radius: .25rem + li:hover + background-color: #f8f9fa + .dropdown ul.dropdown-menu li a + color: #111 + font-family: 'Source Sans Pro', sans-serif + &:hover + color: #111 + text-decoration: none .nav-item .nav-link font-size: 18px color: $dark - // padding: 3vh 8px 3vh 34px padding: 10px +media-breakpoint-up(lg) padding: 6px 18px @@ -81,15 +113,35 @@ nav.navbar .navbar-item height: auto padding: 0 + .active + box-shadow: 0 + .flyout + background-color: #fff + background-clip: padding-box + border: 1px solid rgba(0,0,0,.15) + border-radius: .25rem + box-shadow: 0 + font-size: 16px + .flyout.notifications + right: 65px + top: 57px + .nav-notifications:hover>#notifications-toggle + display: block .nav-notifications-icon color: rgba(17,17,17,0.75) .gravatar width: 32px border-radius: 50% .dropdown-menu - margin-top: -2px + margin-top: -1px .dropdown:hover>.dropdown-menu display: block + .dropdown-item + color: #111 + font-size: 18px + padding: 4px 8px + i + padding-right: 8px #userDropdown .nav-link padding-top: 4px diff --git a/src/styles/_base.sass b/src/styles/base.sass similarity index 57% rename from src/styles/_base.sass rename to src/styles/base.sass index 6ef65aa..2c8aa69 100644 --- a/src/styles/_base.sass +++ b/src/styles/base.sass @@ -1,8 +1,12 @@ +/* mixins reused on every page + ================================================================== */ +@import ../styles/typography +@import ../styles/navbar +@import ../styles/footer + + /* Undo Old Base.css, main.css ================================================================== */ -body, -.container-page - background: #fff .container width: 100% padding-right: 15px diff --git a/src/styles/project-landing.sass b/src/styles/project-landing.sass index a9403f7..1c5c36c 100644 --- a/src/styles/project-landing.sass +++ b/src/styles/project-landing.sass @@ -1,17 +1,16 @@ @import ../styles/colors @import ../styles/breakpoints -@import ../styles/typography -@import ../styles/base -@import ../styles/navbar @import ../styles/jumbotron @import ../styles/navbar-secondary @import ../styles/iframe @import ../styles/gallery @import ../styles/cards -@import ../styles/footer /* Undo main.css padding ================================================================== */ +body, +.container-page + background: #fff section.node-details-container.project padding-bottom: 0 .node-details-title @@ -45,4 +44,10 @@ section margin-top: 0 .card .card-image - margin-top: 0 \ No newline at end of file + margin-top: 0 +footer.container-fluid + margin-top: 72px + +media-breakpoint-up(sm) + margin-top: 112px + +media-breakpoint-up(lg) + margin-top: 136px \ No newline at end of file diff --git a/src/styles/projects-index-collection.sass b/src/styles/projects-index-collection.sass index 7089d64..dd51d55 100644 --- a/src/styles/projects-index-collection.sass +++ b/src/styles/projects-index-collection.sass @@ -1,9 +1,15 @@ @import ../styles/colors @import ../styles/breakpoints -@import ../styles/typography -@import ../styles/base -@import ../styles/navbar @import ../styles/jumbotron @import ../styles/navbar-secondary @import ../styles/cards -@import ../styles/footer \ No newline at end of file + +body, +.container-page + background: #fff +footer.container-fluid + margin-top: 72px + +media-breakpoint-up(sm) + margin-top: 112px + +media-breakpoint-up(lg) + margin-top: 136px \ No newline at end of file diff --git a/src/styles/welcome.sass b/src/styles/welcome.sass new file mode 100644 index 0000000..89c41f4 --- /dev/null +++ b/src/styles/welcome.sass @@ -0,0 +1,29 @@ +@import ../styles/colors +@import ../styles/breakpoints + +nav.navbar + +media-breakpoint-up(md) + padding: 10px 10px 10px 20px + .nav-item-sign-in + line-height: 1.5 + display: flex + align-items: center + justify-content: center + .navbar-item +.join .navbar .nav-item-sign-in a.navbar-item + background: $primary + font-size: 16px + font-weight: 600 + margin: 0 + padding: 8px 16px + width: 100% + &:hover + background: $primary + +media-breakpoint-up(md) + width: auto +// temporarily restore old primary color +h2, +h3 + color: #68B3C8 +footer.container-fluid + margin-top: 0 \ No newline at end of file diff --git a/src/templates/homepage.pug b/src/templates/homepage.pug index 20f2613..e9f7274 100644 --- a/src/templates/homepage.pug +++ b/src/templates/homepage.pug @@ -17,11 +17,6 @@ meta(name="twitter:description", content="Blender Cloud is a web based service d meta(property="og:image", content="{% if main_project.picture_header %}{{ main_project.picture_header.thumbnail('l', api=api) }}{% else %}{{ url_for('static', filename='assets/img/backgrounds/background_agent327_04.jpg')}}{% endif %}") meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_project.picture_header.thumbnail('l', api=api) }}{% else %}{{ url_for('static', filename='assets/img/backgrounds/background_agent327_04.jpg')}}{% endif %}") | {% endblock %} -| {% block css %} -| {{ super() }} -link(href="{{ url_for('static_cloud', filename='assets/css/projects-index-collection.css') }}", rel="stylesheet") -| {% endblock css %} - | {% block body %} .dashboard-container diff --git a/src/templates/layout.pug b/src/templates/layout.pug index b60c0b3..875a22d 100644 --- a/src/templates/layout.pug +++ b/src/templates/layout.pug @@ -59,6 +59,8 @@ html(lang="en") link(href="{{ url_for('static_pillar', filename='assets/css/blog.css') }}", rel="stylesheet") | {% else %} link(href="{{ url_for('static_cloud', filename='assets/css/main.css') }}", rel="stylesheet") + link(href="{{ url_for('static_cloud', filename='assets/css/base.css') }}", rel="stylesheet") + | {% endif %} | {% endblock css %} diff --git a/src/templates/welcome.pug b/src/templates/welcome.pug index 17a9a82..2eb2108 100644 --- a/src/templates/welcome.pug +++ b/src/templates/welcome.pug @@ -11,6 +11,10 @@ meta(property="og:title", content="Blender Cloud - Open Content Production Platf meta(property="og:url", content="https://cloud.blender.org/") meta(property="og:image", content="{{ url_for('static', filename='assets/img/backgrounds/background_dweebs_01.jpg')}}") | {% endblock og %} +| {% block css %} +| {{ super() }} +link(href="{{ url_for('static_cloud', filename='assets/css/welcome.css') }}", rel="stylesheet") +| {% endblock css %} | {% block page_overlay %} #page-overlay.video @@ -19,12 +23,10 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac | {% block navigation_search %}{% endblock %} | {% block navigation_sections %} -li - a.navbar-item(href="{{ url_for('main.main_blog') }}") - span Blog -li - a.navbar-item(href="#pricing") - span Pricing +li.nav-item + a.nav-link(href="{{ url_for('main.main_blog') }}") Blog +li.nav-item + a.nav-link(href="#pricing") Pricing | {% endblock navigation_sections %} | {% block navigation_user %}