Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-05 05:25:27 +02:00
Code Releases Activity

Update Space view to use new layout

Browse source
This commit is contained in:
McMatts 2018-12-17 13:39:13 +00:00
parent 0cc83c13c8
commit d5b5e015d1
18 changed files with 474 additions and 330 deletions
Download patch file Download diff file Expand all files Collapse all files

22
gui/app/styles/core/layout/grid.scss
View file

@ -90,3 +90,25 @@ $display-break-5: 1800px;
}
}
}
.grid-container-5-5 {
@extend %grid-base;
@media (min-width: $display-break-2) {
grid-template-columns: 5fr 5fr;
grid-template-rows: 1fr;
.grid-cell-1 {
grid-column-start: 1;
grid-row-start: 1;
padding: 0;
}
.grid-cell-2 {
grid-column-start: 2;
grid-row-start: 1;
padding: 0;
justify-self: self-end;
}
}
}

4
gui/app/styles/core/layout/master-internal.scss
View file

@ -5,21 +5,19 @@
display: block;
height: auto;
width: 100%;
// z-index: 777;
.master-content {
display: block;
height: auto;
width: 100%;
padding: 10px;
// z-index: 666;
}
}
.master-sidebar-container {
display: block;
height: auto;
width: 100%;
z-index: 1041;
// z-index: 1041; // reequired if we want to show modals from inside sidebar
.master-navbar {
display: block;

18
gui/app/styles/core/layout/sidebar.scss
View file

@ -13,6 +13,24 @@
color: map-get($gray-shades, 700);
}
> .text {
margin: 10px 0;
font-size: 1rem;
font-weight: 500;
color: $color-black-light-3;
}
> .label {
display: inline-block;
margin: 10px 0 13px 0;
padding: 0.3rem 0.7rem;
font-size: 1.1rem;
font-weight: 500;
background-color: map-get($gray-shades, 600);
color: map-get($gray-shades, 100);
@include border-radius(3px);
}
> .list {
margin: 10px 0;

148
gui/app/styles/core/view/space.scss
View file

@ -1,24 +1,15 @@
.view-space {
> .filter-caption {
margin: 10px 0;
color: map-get($gray-shades, 600);
font-size: 1.1rem;
font-weight: 500;
text-align: center;
}
> .documents {
margin: 60px 0;
margin: 0;
padding: 0;
> .document {
@include card();
@include ease-in();
list-style-type: none;
overflow: hidden;
position: relative;
margin: 0 0 30px 0;
margin: 0 0 2rem 0;
padding: 15px 20px;
width: 100%;
position: relative;
&:hover {
> .checkbox {
@ -26,55 +17,110 @@
}
}
> a {
@include ease-in();
display: block;
position: relative;
padding: 15px 20px;
> .title {
color: $color-black;
font-size: 1.3rem;
margin-bottom: 5px;
}
> .snippet {
color: map-get($gray-shades, 600);
font-size: 1rem;
line-height: 24px;
}
&:hover {
color: map-get($gray-shades, 600);
}
}
> .checkbox {
position: absolute;
display: none;
top: 10px;
right: 20px;
right: 10px;
cursor: pointer;
> .material-icons {
width: 10px;
margin: 0;
padding: 0;
color: map-get($gray-shades, 900);
> .dicon {
color: map-get($yellow-shades, 700);
cursor: pointer;
font-weight: 600;
font-size: 20px;
}
}
> .actions {
position: absolute;
display: none;
bottom: 2px;
right: 12px;
bottom: 10px;
right: 10px;
cursor: pointer;
}
> .info {
padding: 0;
align-self: self-start;
justify-self: self-start;
> .name {
font-size: 1.3rem;
font-weight: 700;
color: map-get($gray-shades, 800);
}
> .desc {
font-size: 1.1rem;
font-weight: 400;
margin-top: 0.4rem;
color: $color-black-light-3;
}
}
> .meta {
padding: 25px 0 0 0;
> .lifecycle {
display: inline-block;
text-transform: uppercase;
font-size: 0.9rem;
font-weight: 500;
text-align: center;
@include border-radius(5px);
background-color: map-get($gray-shades, 300);
padding: 0.25rem 1rem;
> .draft {
color: map-get($yellow-shades, 600);
}
> .live {
color: map-get($green-shades, 600);
}
> .archived {
color: map-get($red-shades, 600);
}
}
> .dicon {
color: map-get($gray-shades, 600);
font-size: 20px;
}
.hashtags {
display: inline-block;
padding: 0 10px 0 10px;
> .hashtag {
padding: 0 10px 0 10px;
> .dicon {
color: map-get($gray-shades, 500);
font-size: 20px;
vertical-align: bottom;
}
> .name {
display: inline-block;
color: map-get($gray-shades, 800);
font-size: 1rem;
}
&:hover {
> .dicon, > .name {
color: map-get($gray-shades, 600);
}
}
}
}
}
}
> .selected {
background-color: $theme-100 !important;
background-color: map-get($yellow-shades, 200);
> .checkbox {
display: block;
@ -83,19 +129,9 @@
> .actions {
display: block;
}
}
}
.hashtags {
> .hashtag {
display: inline-block;
margin: 5px 10px 0 5px;
color: map-get($gray-shades, 600);
font-size: 0.875rem;
font-style: italic;
&:hover {
color: $color-link;
background-color: map-get($yellow-shades, 200);
}
}
}