mirror of
https://github.com/documize/community.git
synced 2025-08-02 20:15:26 +02:00
[WIP] Improve master layout for different devices + product growth
We have two pressing needs: 1. Improve experience on real estate challenged devices. 2. Make room for product feature-set growth. To hit these targets, we need to develop better UX through smarter on-screen space management.
This commit is contained in:
Harvey Kandola
parent
bce1c1b166
commit
62c3cd03ad
51 changed files with 433 additions and 525 deletions
|
|
@ -1,5 +1,5 @@
|
|||
@import "grid.scss";
|
||||
@import "spacing.scss";
|
||||
@import "headings.scss";
|
||||
@import "master-internal.scss";
|
||||
@import "bars.scss";
|
||||
@import "sidebar.scss";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,117 @@
|
|||
// CSS GRID LAYOUT
|
||||
|
||||
// Mobile-first layout
|
||||
.master-navigation {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
|
||||
> .navbar {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
background-color: $theme-500;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
z-index: 999;
|
||||
|
||||
> .container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
|
||||
> .options {
|
||||
> .selected {
|
||||
> .dicon {
|
||||
color: $color-white !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .option {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
||||
> .dicon {
|
||||
display: inline-block;
|
||||
color: $theme-300;
|
||||
font-size: 20px;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .dicon {
|
||||
color: $theme-400 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .invalid-plan {
|
||||
> .dicon {
|
||||
color: map-get($yellow-shades, 600) !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .user-gravatar-container {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 7px 10px;
|
||||
vertical-align: top;
|
||||
|
||||
> .user-gravatar {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
color: $theme-500;
|
||||
font-weight: bold;
|
||||
background-color: $color-white;
|
||||
@extend .no-select;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .toolbar {
|
||||
display: block;
|
||||
height: auto;
|
||||
min-height: 40px;
|
||||
width: 100%;
|
||||
background-color: map-get($gray-shades, 100);
|
||||
background-color: $color-sidebar;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
z-index: 999;
|
||||
|
||||
> .container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
|
||||
> div[class^="zone-"], div[class*=" zone-"] {
|
||||
margin: 0;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.master-container {
|
||||
display: block;
|
||||
height: auto;
|
||||
|
|
@ -14,119 +125,33 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Desktop layout adjustments
|
||||
// Small screen starts around 900px
|
||||
@media (min-width: $display-break-1) and (min-height: 650px) {
|
||||
.master-navigation {
|
||||
> .navbar {
|
||||
|
||||
}
|
||||
|
||||
> .toolbar {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.master-sidebar-container {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
z-index: 1041; // required if we want to show modals from inside sidebar
|
||||
|
||||
.master-navbar {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
background-color: $theme-500;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
z-index: 999;
|
||||
|
||||
> .nav-content {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
|
||||
> .nav-options {
|
||||
> .selected {
|
||||
> .dicon, > .name {
|
||||
color: $color-white !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .option {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
||||
> .dicon {
|
||||
display: inline-block;
|
||||
color: $theme-300;
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
> .name {
|
||||
display: none;
|
||||
color: $theme-300;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .dicon, > .name {
|
||||
color: $theme-400 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .meta {
|
||||
> .logo {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> .bookmarks, > .login, > .invalid-plan {
|
||||
display: inline-block;
|
||||
|
||||
>.dicon {
|
||||
cursor: pointer;
|
||||
color: $color-white;
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
> .invalid-plan {
|
||||
>.dicon {
|
||||
color: map-get($yellow-shades, 600) !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .user-gravatar-container {
|
||||
display: inline-block;
|
||||
margin: 0 10px 0 0;
|
||||
padding: 0;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
> .user-gravatar {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 24px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
color: $theme-500;
|
||||
font-weight: bold;
|
||||
background-color: $color-white;
|
||||
@extend .no-select;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.master-sidebar {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
z-index: 888;
|
||||
// background-color: map-get($gray-shades, 100);
|
||||
background-color: $color-sidebar;
|
||||
}
|
||||
//z-index: 1041; // required if we want to show modals from inside sidebar
|
||||
}
|
||||
|
||||
// Tablet starts around 700px
|
||||
|
|
@ -135,98 +160,20 @@
|
|||
display: grid;
|
||||
grid-template-columns: 240px auto;
|
||||
|
||||
.master-sidebar {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
max-height: 90vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.master-content {
|
||||
grid-column-start: 2;
|
||||
padding: 20px;
|
||||
max-width: calc(100vw - 250px);
|
||||
}
|
||||
}
|
||||
|
||||
.master-sidebar-container {
|
||||
position: fixed;
|
||||
width: 240px;
|
||||
height: 100vh;
|
||||
|
||||
.master-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
|
||||
> .nav-content {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
height: 100vh;
|
||||
|
||||
> .nav-options {
|
||||
> .option {
|
||||
display: block;
|
||||
|
||||
>.dicon {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .meta {
|
||||
padding-bottom: 35px;
|
||||
|
||||
> .logo {
|
||||
display: block;
|
||||
|
||||
> img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
> .documize {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .bookmarks, > .login, > .invalid-plan {
|
||||
display: block;
|
||||
|
||||
>.dicon {
|
||||
color: $color-white;
|
||||
font-size: 20px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .user-gravatar-container {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 10px 0 15px 4px;
|
||||
padding: 0;
|
||||
|
||||
> .user-gravatar {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.master-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 40px;
|
||||
width: 200px;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small screen starts around 900px
|
||||
|
|
@ -247,63 +194,6 @@
|
|||
width: 290px;
|
||||
height: 100vh;
|
||||
|
||||
.master-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 70px;
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
|
||||
> .nav-content {
|
||||
> .nav-options {
|
||||
> .option {
|
||||
> .dicon {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
padding: 15px 0 10px 0;
|
||||
}
|
||||
|
||||
> .name {
|
||||
display: block;
|
||||
padding: 0 0 15px 0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .meta {
|
||||
> .logo {
|
||||
> img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
> .documize {
|
||||
display: block;
|
||||
font-size: 0.7rem;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .user-gravatar-container {
|
||||
margin: 10px 0 15px 8px;
|
||||
padding: 0;
|
||||
|
||||
> .user-gravatar {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.master-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -332,13 +222,6 @@
|
|||
width: 320px;
|
||||
height: 100vh;
|
||||
|
||||
.master-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 70px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.master-sidebar {
|
||||
position: fixed;
|
||||
|
|
@ -369,14 +252,6 @@
|
|||
width: 370px;
|
||||
height: 100vh;
|
||||
|
||||
.master-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 70px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.master-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
Loading…
Add table
Add a link
Reference in a new issue