Skip to content

Commit

Permalink
Redesign navigation
Browse files Browse the repository at this point in the history 
Fixed semantics:

* Private Messages moved to user nav.
* Search moved to main nav.

UI redesign on desktop and mobile

	deleted:    app/assets/stylesheets/thredded/layout/_topic-navigation.scss
  • Loading branch information
@glebm
glebm committed Apr 18, 2016
1 parent 0a1a20c commit ec699fd
Show file tree
Hide file tree
Showing 40 changed files with 250 additions and 221 deletions.
4 changes: 4 additions & 0 deletions app/assets/images/thredded/private-messages.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions app/assets/images/thredded/settings.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion app/assets/stylesheets/thredded/_thredded.scss
View file
Expand Up @@ -6,12 +6,13 @@

@import "layout/main-container";
@import "layout/main-navigation";
@import "layout/topic-navigation";
@import "layout/search-navigation";
@import "layout/user-navigation";
@import "layout/navigation";

@import "components/base";
@import "components/alerts";
@import "components/icons";
@import "components/currently-online";
@import "components/empty";
@import "components/flash-message";
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/thredded/base/_grid.scss
View file
Expand Up @@ -5,7 +5,7 @@
}

@mixin thredded-media-tablet-and-up {
@media screen and (min-width: map-get($thredded-grid-breakpoint-max-widths, mobile) + 1px) {
@media screen and (min-width: map-get($thredded-grid-breakpoint-max-widths, mobile) + 0.00001rem) {
@content;
}
}
Expand Down
4 changes: 4 additions & 0 deletions app/assets/stylesheets/thredded/base/_typography.scss
View file
Expand Up @@ -35,3 +35,7 @@
margin: 0 0 $thredded-small-spacing;
}

%thredded--icon {
fill: currentColor;
}

4 changes: 2 additions & 2 deletions app/assets/stylesheets/thredded/base/_variables.scss
View file
@@ -1,6 +1,6 @@
// Grid
$thredded-grid-container-max-width: 690px !default;
$thredded-grid-breakpoint-max-widths: (mobile: 544px, tablet: 768px) !default;
$thredded-grid-container-max-width: 43.125rem !default;
$thredded-grid-breakpoint-max-widths: (mobile: 34rem, tablet: 48rem) !default;

// Typography
$thredded-base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;
Expand Down
3 changes: 1 addition & 2 deletions app/assets/stylesheets/thredded/components/_form-list.scss
View file
Expand Up @@ -2,8 +2,7 @@
@extend %thredded--list-unstyled;

&.on-top {
border-bottom: $thredded-base-border;
margin-bottom: $thredded-base-spacing;
margin-bottom: $thredded-small-spacing;
}

li {
Expand Down
3 changes: 3 additions & 0 deletions app/assets/stylesheets/thredded/components/_icons.scss
View file
@@ -0,0 +1,3 @@
&--icon {
@extend %thredded--icon;
}
2 changes: 1 addition & 1 deletion app/assets/stylesheets/thredded/components/_post.scss
View file
Expand Up @@ -15,7 +15,7 @@
top: 6px;
width: 1.75rem; // 28px

@media (min-width: $thredded-grid-container-max-width + 64px) {
@media (min-width: $thredded-grid-container-max-width + 4rem) {
height: 2.25rem; // 36px
left: -3rem;
position: absolute;
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/thredded/layout/_main-container.scss
View file
Expand Up @@ -10,6 +10,6 @@
padding: 0;

@include thredded-media-tablet-and-up {
padding: 2rem;
padding: 0 2rem $thredded-small-spacing 2rem;
}
}
14 changes: 4 additions & 10 deletions app/assets/stylesheets/thredded/layout/_main-navigation.scss
View file
@@ -1,20 +1,14 @@
&--main-navigation {
@extend %thredded--list-unstyled;
@include thredded--clearfix;
border-bottom: $thredded-base-border;
display: block;
margin: $thredded-small-spacing 0;
@include thredded-media-tablet-and-up {
margin-top: $thredded-small-spacing;
}
}

&--navigation-breadcrumbs {
@extend %thredded--list-unstyled;
margin-bottom: $thredded-small-spacing;

@include thredded-media-tablet-and-up {
float: left;
margin-bottom: 0;
padding-bottom: $thredded-small-spacing;
}

li {
display: inline-block;
Expand All @@ -25,7 +19,7 @@
content: "";
display: inline-block;
height: 10px;
margin: 0 $thredded-small-spacing;
margin: 0 ($thredded-small-spacing - 0.3rem) 0 $thredded-small-spacing;
width: 6px;
}

Expand Down
72 changes: 54 additions & 18 deletions app/assets/stylesheets/thredded/layout/_navigation.scss
View file
@@ -1,35 +1,71 @@
&--navigation {
margin-bottom: $thredded-small-spacing;
position: relative;
.thredded--icon {
display: none;
}
}

@include thredded-media-mobile {
&--navigation {
display: table;
position: relative;
table-layout: fixed;
width: 100%;
}
&--main-navigation {
position: relative;
border: none;
}
&--navigation-breadcrumbs {
font-size: $thredded-font-size-small;
padding: $thredded-small-spacing 5rem $thredded-small-spacing 0;
}
&--navigation--search {
display: none;
.thredded--messageboards-index &,
.thredded--topics-index &,
.thredded--topic-search-results & {
display: block;
}
}
&--user-navigation {
display: table-footer-group;
&--actions {
&-standalone {
display: block;
margin-bottom: 0;
}
%icon-nav-item {
margin-right: 0;
padding: 0;
position: absolute;
left: 0;
bottom: (0.8rem - $thredded-small-spacing);
.thredded--messageboards-index &,
.thredded--topics-index &,
.thredded--topic-search-results & {
bottom: (4.05rem - $thredded-small-spacing);
}
top: (0.8rem - $thredded-small-spacing);
z-index: 2;
a {
display: block;
padding: 0 0 $thredded-small-spacing 0;
padding: ($thredded-small-spacing / 2) 0 ($thredded-small-spacing / 2) 0;
font-size: 0;
}
@media (max-width: 320px) {
font-size: $thredded-font-size-small;
.thredded--icon {
display: block;
width: 2rem;
height: 2rem;
}
}
&--search {
display: none;
.thredded--messageboards-index &,
.thredded--topics-index &,
.thredded--topic-search-results & {
display: block;
&--settings {
@extend %icon-nav-item;
right: 2.6rem;
}
&--private-topics {
@extend %icon-nav-item;
right: 0;
top: 1px;
a {
position: relative;
}
&--unread {
bottom: 0.3rem;
position: absolute;
right: -0.2rem;
}
}
}
Expand Down
66 changes: 66 additions & 0 deletions app/assets/stylesheets/thredded/layout/_search-navigation.scss
View file
@@ -0,0 +1,66 @@
&--navigation--search {
margin-right: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;

@include thredded-media-mobile {
position: initial;
}

label {
display: none;
}

input[type="search"] {
box-shadow: none;
transition: all 0.15s ease-out 0s;
width: 100%;

@include thredded-media-tablet-and-up {
background: transparent;
border-color: transparent;
font-size: $thredded-font-size-small;
min-width: 200px;
margin-right: -$thredded-base-spacing;
text-align: right;
width: auto;
padding: 0.90625rem 0.75rem 0.8125rem 0.75rem;

&:focus {
background: $thredded-background-color;
box-shadow: none;
min-width: 290px;
text-align: left;
transition: all 0.15s ease-out 0s;
margin-right: 0;
}

&:hover {
border-color: transparent;
box-shadow: none;
}

&::placeholder {
color: $thredded-secondary-nav-color;
}

&:hover:not(:focus) {
cursor: pointer;
&::placeholder {
color: $thredded-nav-hover-color;
transition: color 0.1s linear;
}
}

&:focus {
border-color: $thredded-base-border-color;
}
}
}

[type="submit"] {
display: none;
}
}
45 changes: 0 additions & 45 deletions app/assets/stylesheets/thredded/layout/_topic-navigation.scss
View file

This file was deleted.

0 comments on commit ec699fd

Please sign in to comment.