archive/blender-cloud
0
1
Fork 1
Code Issues 24 Pull Requests Projects Releases Wiki Activity

Polish nav for all pages. Fix hover dropdowns, notification, profile menu

Browse Source
This commit is contained in:
Sam Lu
2018-08-02 00:20:05 -05:00
parent 78702cc5e0
commit 09ae6712bb
12 changed files with 132 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/styles/_footer.sass
View File

@@ -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

3
src/styles/_gallery.sass
View File

@@ -1,3 +1,6 @@
@import ../styles/colors
@import ../styles/breakpoints
.gallery
.cta-arrow
margin-top: 20px

3
src/styles/_jumbotron.sass
View File

@@ -1,3 +1,6 @@
@import ../styles/colors
@import ../styles/breakpoints
.jumbotron
background-color: #fff
background-repeat: no-repeat

3
src/styles/_navbar-secondary.sass
View File

@@ -1,3 +1,6 @@
@import ../styles/colors
@import ../styles/breakpoints
.nav-scroller
position: relative
z-index: 2

56
src/styles/_navbar.sass
View File

@@ -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

10
src/styles/_base.sass → src/styles/base.sass
View File

@@ -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

15
src/styles/project-landing.sass
View File

@@ -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
margin-top: 0
footer.container-fluid
margin-top: 72px
+media-breakpoint-up(sm)
margin-top: 112px
+media-breakpoint-up(lg)
margin-top: 136px

14
src/styles/projects-index-collection.sass
View File

@@ -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
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

29
src/styles/welcome.sass Normal file
View File

@@ -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

5
src/templates/homepage.pug
View File

@@ -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

2
src/templates/layout.pug
View File

@@ -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 %}

14
src/templates/welcome.pug
View File

@@ -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 %}