mirror of
https://github.com/penpot/penpot.git
synced 2025-01-08 16:00:19 -05:00
wip refactor dashboard
This commit is contained in:
Juan de la Cruz
parent
f9f36445ec
commit
e0bd1098eb
12 changed files with 674 additions and 52 deletions
|
|
@ -8,6 +8,6 @@ if [ ! -e ~/local/.fixtures-loaded ]; then
|
|||
touch ~/local/.fixtures-loaded
|
||||
fi
|
||||
|
||||
clojure ${CLOJURE_OPTS} -m uxbox.main
|
||||
clojure -m uxbox.main
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
body {
|
||||
background-color: $secondary-ui-bg;
|
||||
background-color: lighten($dark-ui-bg, 5%);
|
||||
color: $medium-ui-text;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ $ui-flavour: $color-gray;
|
|||
// Background colors
|
||||
$primary-ui-bg: $color-gray-50;
|
||||
$secondary-ui-bg: $color-gray-60;
|
||||
$dark-ui-bg: $color-gray-40;
|
||||
$dark-ui-bg: $color-gray-10;
|
||||
|
||||
// Border color
|
||||
$intense-ui-border: $color-gray-40;
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@
|
|||
}
|
||||
|
||||
.dashboard-content {
|
||||
background-image: url("../images/dashboard-img.svg");
|
||||
background-position: bottom center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
// background-image: url("../images/dashboard-img.svg");
|
||||
// background-position: bottom center;
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 60px);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
.dashboard-bar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: $fs14;
|
||||
padding: $small $medium $small $x-big*2;
|
||||
|
||||
.dashboard-images {
|
||||
flex-basis: 70px;
|
||||
}
|
||||
|
||||
.dashboard-info {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 500px;
|
||||
justify-content: space-around;
|
||||
|
||||
.dashboard-projects {
|
||||
font-weight: bold;
|
||||
margin-right: $medium;
|
||||
}
|
||||
|
||||
.sort-by {
|
||||
margin-left: $small;
|
||||
}
|
||||
|
||||
.input-select {
|
||||
background-color: transparent;
|
||||
border-color: $soft-ui-border;
|
||||
font-size: $fs14;
|
||||
margin-bottom: 0;
|
||||
margin-left: $medium;
|
||||
padding: 3px 25px 3px 3px;
|
||||
|
||||
option {
|
||||
color: $intense-ui-text;
|
||||
background: $secondary-ui-bg;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dashboard-search {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: $small;
|
||||
|
||||
.input-text {
|
||||
background: $input-bg;
|
||||
border: 0;
|
||||
color: $intense-ui-text;
|
||||
padding: 4px 8px;
|
||||
margin: 0;
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
.clear-search {
|
||||
align-items: center;
|
||||
background: $input-bg;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
padding: 0 5px;
|
||||
|
||||
svg {
|
||||
fill: $medium-ui-icons;
|
||||
height: 15px;
|
||||
transform: rotate(45deg);
|
||||
width: 15px;
|
||||
|
||||
&:hover {
|
||||
fill: $color-danger;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.library-gap {
|
||||
padding: $small $medium $small 270px;
|
||||
}
|
||||
|
||||
}
|
||||
419
frontend/resources/styles/main/partials/dashboard-grid-v2.scss
Normal file
419
frontend/resources/styles/main/partials/dashboard-grid-v2.scss
Normal file
|
|
@ -0,0 +1,419 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
.dashboard-grid {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $fs14;
|
||||
height: 100%;
|
||||
padding: $medium;
|
||||
// ACTIVITY BAR PADDING
|
||||
//padding: $medium 250px $medium $medium;
|
||||
|
||||
.dashboard-title {
|
||||
margin: $medium 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
.edit {
|
||||
padding: 5px 10px;
|
||||
background: $primary-ui-bg;
|
||||
border: none;
|
||||
height: 100%;
|
||||
}
|
||||
.close {
|
||||
padding: 5px 10px;
|
||||
background: $primary-ui-bg;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
transform: rotate(45deg);
|
||||
fill: $color-gray;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edition {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: 0;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
fill: $color-gray;
|
||||
height: 20px;
|
||||
margin: 0 10px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-darker;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dashboard-grid-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 60vh;
|
||||
overflow: scroll;
|
||||
width: 100%;
|
||||
|
||||
.dashboard-grid-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
align-items: center;
|
||||
border-radius: $br-medium;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
height: 200px;
|
||||
margin: $medium $medium 0 $medium;
|
||||
max-width: 300px;
|
||||
min-width: 260px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 18%;
|
||||
|
||||
&.small-item {
|
||||
max-width: 12%;
|
||||
min-width: 190px;
|
||||
padding: $medium;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.grid-item-icon {
|
||||
width:90px;
|
||||
height:90px;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: 0;
|
||||
padding: $small;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
h3 {
|
||||
color: $intense-ui-text;
|
||||
font-size: $fs16;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
padding-right: $small;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span.date {
|
||||
color: $soft-ui-text;
|
||||
font-size: $fs12;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.add-project {
|
||||
border: 2px dashed $color-gray-light;
|
||||
box-shadow: inset 0 0 0 transparent;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
background-color: $color-primary-light;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
font-size: $fs24;
|
||||
padding: $small $medium;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary-light;
|
||||
border: 2px solid $color-white;
|
||||
|
||||
span {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// PROJECTS, ELEMENTS & ICONS GRID
|
||||
&.project-th {
|
||||
background-color: $primary-ui-bg;
|
||||
border-bottom: 2px solid lighten($soft-ui-border, 12%);
|
||||
|
||||
&:hover {
|
||||
border-color: $main-ui-color;
|
||||
|
||||
h3 {
|
||||
color: $main-ui-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.project-th-actions {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
left: 0;
|
||||
justify-content: flex-end;
|
||||
padding: $small;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-light;
|
||||
height: 14px;
|
||||
margin-right: $x-small;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-light;
|
||||
}
|
||||
|
||||
.project-th-icon {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-right: $small;
|
||||
|
||||
&.delete {
|
||||
margin-right: 0;
|
||||
|
||||
svg {
|
||||
fill: $medium-ui-icons;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.4);
|
||||
|
||||
svg {
|
||||
fill: $color-danger;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.edit {
|
||||
margin-right: 0;
|
||||
|
||||
svg {
|
||||
fill: $medium-ui-icons;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.4);
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// IMAGES SECTION
|
||||
&.images-th {
|
||||
background-color: $primary-ui-bg;
|
||||
border-bottom: 2px solid lighten($color-gray-light, 12%);
|
||||
|
||||
&:hover {
|
||||
border-color: $main-ui-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.grid-item-image {
|
||||
|
||||
svg {
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
min-height: 40px;
|
||||
min-width: 40px;
|
||||
width: 8vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
border-top-left-radius: $br-medium;
|
||||
border-top-right-radius: $br-medium;
|
||||
height: 25%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.color-data {
|
||||
color: $color-gray;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.input-checkbox {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 5px;
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// STYLES FOR LIBRARIES
|
||||
&.library {
|
||||
padding: $medium $medium $medium 250px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.grid-item-th {
|
||||
background-position: center;
|
||||
background-size: auto 80%;
|
||||
background-repeat: no-repeat;
|
||||
border-top-left-radius: $br-medium;
|
||||
border-top-right-radius: $br-medium;
|
||||
height: 70%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.img-th {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// MULTISELECT OPTIONS BAR
|
||||
.multiselect-bar {
|
||||
@include animation(0,.5s,fadeInUp);
|
||||
align-items: center;
|
||||
background-color: $primary-ui-bg;
|
||||
display: flex;
|
||||
left: 0;
|
||||
justify-content: center;
|
||||
padding: $medium;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
|
||||
.multiselect-nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-left: 10%;
|
||||
width: 110px;
|
||||
|
||||
span {
|
||||
margin-right: 1.5rem;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
fill: $medium-ui-icons;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:hover {
|
||||
fill: $intense-ui-icons;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span.delete {
|
||||
|
||||
&:hover {
|
||||
|
||||
svg{
|
||||
fill: $color-danger-light;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.move-item {
|
||||
position: relative;
|
||||
|
||||
.move-list {
|
||||
background-color: $dark-ui-bg;
|
||||
border-radius: $br-small;
|
||||
bottom: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: -30px;
|
||||
max-height: 260px;
|
||||
overflow-y: scroll;
|
||||
padding: $medium;
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
|
||||
li {
|
||||
padding-bottom: $medium;
|
||||
|
||||
&.title {
|
||||
color: $color-gray-darker;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -83,14 +83,13 @@
|
|||
.dashboard-grid-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
margin-bottom: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
align-items: center;
|
||||
border-radius: $br-medium;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -138,7 +137,7 @@
|
|||
}
|
||||
|
||||
span.date {
|
||||
color: $soft-ui-text;
|
||||
color: $medium-ui-text;
|
||||
font-size: $fs12;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -148,42 +147,28 @@
|
|||
}
|
||||
|
||||
&.add-project {
|
||||
border: 2px dashed $color-gray-light;
|
||||
box-shadow: inset 0 0 0 transparent;
|
||||
border: 1px dashed $color-gray-light;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
background-color: $color-primary-light;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
font-size: $fs24;
|
||||
padding: $small $medium;
|
||||
color: $intense-ui-text;
|
||||
font-size: $fs15;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary-light;
|
||||
border: 2px solid $color-white;
|
||||
|
||||
span {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
background-color: $color-white;
|
||||
border: 2px solid $main-ui-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// PROJECTS, ELEMENTS & ICONS GRID
|
||||
&.project-th {
|
||||
background-color: $primary-ui-bg;
|
||||
border-bottom: 2px solid lighten($soft-ui-border, 12%);
|
||||
background-color: $color-white;
|
||||
border: 2px solid $dark-ui-bg;
|
||||
|
||||
&:hover {
|
||||
border-color: $main-ui-color;
|
||||
|
||||
h3 {
|
||||
color: $main-ui-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.project-th-actions {
|
||||
|
|
@ -204,7 +189,7 @@
|
|||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-light;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.project-th-icon {
|
||||
|
|
@ -242,7 +227,7 @@
|
|||
transform: scale(1.4);
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
fill: $soft-ui-icons;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -311,7 +296,7 @@
|
|||
|
||||
// STYLES FOR LIBRARIES
|
||||
&.library {
|
||||
padding: $medium $medium $medium 250px;
|
||||
padding: $medium $medium $medium 230px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -320,8 +305,8 @@
|
|||
background-position: center;
|
||||
background-size: auto 80%;
|
||||
background-repeat: no-repeat;
|
||||
border-top-left-radius: $br-medium;
|
||||
border-top-right-radius: $br-medium;
|
||||
border-top-left-radius: $br-small;
|
||||
border-top-right-radius: $br-small;
|
||||
height: 70%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
|
|
|||
123
frontend/resources/styles/main/partials/library-bar-v2.scss
Normal file
123
frontend/resources/styles/main/partials/library-bar-v2.scss
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
.library-bar {
|
||||
background-color: $primary-ui-bg;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
width: 250px;
|
||||
|
||||
.library-bar-inside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding-top: 60px;
|
||||
|
||||
.library-tabs {
|
||||
align-items: center;
|
||||
background-color: $secondary-ui-bg;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin: 0;
|
||||
padding-top: 12px;
|
||||
|
||||
li {
|
||||
background-color: darken($secondary-ui-bg, 10%);
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
color: $color-gray;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: $fs14;
|
||||
padding: .6rem;
|
||||
text-align: center;
|
||||
width: 118px;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
&.current {
|
||||
background-color: $primary-ui-bg;
|
||||
color: $main-ui-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.library-elements {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(95% - 1rem);
|
||||
margin-bottom: 1rem;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 20px;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid $secondary-ui-bg;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
padding: 10px;
|
||||
|
||||
span.element-title {
|
||||
color: $color-gray-dark;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input.element-title {
|
||||
border: 0;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.close {
|
||||
background: $primary-ui-bg;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray;
|
||||
height: 20px;
|
||||
transform: rotate(45deg) translateY(7px);
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.element-subtitle {
|
||||
color: $color-gray-light;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.current {
|
||||
background-color: $main-ui-color;
|
||||
|
||||
span.element-title,
|
||||
.element-subtitle {
|
||||
color: $color-white;
|
||||
}
|
||||
input.element-title {
|
||||
color: $color-gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -6,12 +6,12 @@
|
|||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
.library-bar {
|
||||
background-color: $primary-ui-bg;
|
||||
background-color: $color-white;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
width: 250px;
|
||||
width: 230px;
|
||||
|
||||
.library-bar-inside {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -9,17 +9,18 @@
|
|||
align-items: center;
|
||||
background-color: $primary-ui-bg;
|
||||
display: flex;
|
||||
height: 60px;
|
||||
height: 40px;
|
||||
padding: $x-small $medium;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
.main-logo {
|
||||
padding-top: $x-small;
|
||||
|
||||
svg {
|
||||
fill: $medium-ui-icons;
|
||||
height: 40px;
|
||||
width: 120px;
|
||||
fill: $intense-ui-icons;
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -29,17 +30,19 @@
|
|||
.main-nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
font-size: $fs15;
|
||||
height: 35px;
|
||||
margin: 0 0 0 120px;
|
||||
|
||||
li {
|
||||
|
||||
a {
|
||||
border-bottom: 2px solid transparent;
|
||||
color: $soft-ui-text;
|
||||
padding: 1rem;
|
||||
margin: $x-small $big;
|
||||
|
||||
&:hover {
|
||||
color: $intense-ui-text;
|
||||
border-color: $main-ui-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -47,7 +50,7 @@
|
|||
&.current {
|
||||
|
||||
a {
|
||||
color: $intense-ui-text;
|
||||
border-color: $main-ui-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"ds.num-files" ["No files"
|
||||
"%s file"
|
||||
"%s files"]
|
||||
"ds.new-file" "+ New File"
|
||||
"ds.project-title" "Your projects"
|
||||
"ds.project-new" "+ New project"
|
||||
"ds.project-thumbnail.alt" "Project title"
|
||||
|
|
|
|||
|
|
@ -160,9 +160,9 @@
|
|||
(str (tr "ds.updated-at" (dt/timeago (:modified-at file))))]]
|
||||
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.pages
|
||||
i/page
|
||||
#_[:span (:total-pages project)]]
|
||||
;; [:div.project-th-icon.pages
|
||||
;; i/page
|
||||
;; #_[:span (:total-pages project)]]
|
||||
#_[:div.project-th-icon.comments
|
||||
i/chat
|
||||
[:span "0"]]
|
||||
|
|
@ -188,11 +188,11 @@
|
|||
#_(udl/open! :create-project))
|
||||
]
|
||||
[:section.dashboard-grid
|
||||
[:h2 (tr "ds.projects.file-name")]
|
||||
;; [:h2 (tr "ds.projects.file-name")]
|
||||
[:div.dashboard-grid-content
|
||||
[:div.dashboard-grid-row
|
||||
[:div.grid-item.add-project #_{:on-click on-click}
|
||||
[:span (tr "ds.project-file")]]
|
||||
[:span (tr "ds.new-file")]]
|
||||
(for [item files]
|
||||
[:& grid-item {:file item :key (:id item)}])]]]))
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue