mirror of
https://github.com/documize/community.git
synced 2025-08-02 20:15:26 +02:00
Update document view to use new UI framework
1. Sidebar contains ToC & attachments. 2. Document meta moved up before content (to frame context). 3. Per section toolbar re-designed. Co-Authored-By: Harvey Kandola <harvey@documize.com>
This commit is contained in:
sauls8t
parent
3d2060ca60
commit
93253be0f2
27 changed files with 528 additions and 553 deletions
|
|
@ -1,28 +1,3 @@
|
|||
.start-section {
|
||||
@extend .no-select;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 1.3rem;
|
||||
|
||||
> .start-button {
|
||||
text-align: center;
|
||||
margin: 30px 0 20px 0;
|
||||
position: relative;
|
||||
color: map-get($gray-shades, 300);
|
||||
|
||||
> .cta {
|
||||
@include ease-in();
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.22rem;
|
||||
|
||||
&:hover {
|
||||
color: map-get($green-shades, 700);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-section-wizard {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "add-section.scss";
|
||||
@import "copy-move.scss";
|
||||
@import "doc-meta.scss";
|
||||
@import "doc-structure.scss";
|
||||
@import "meta.scss";
|
||||
@import "section.scss";
|
||||
@import "section-editor.scss";
|
||||
@import "sidebar.scss";
|
||||
@import "sidebar-toc.scss";
|
||||
|
|
|
|||
|
|
@ -1,96 +0,0 @@
|
|||
.view-document {
|
||||
> .document-heading {
|
||||
.doc-title {
|
||||
margin: 50px 0 10px;
|
||||
font-size: 2.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.doc-excerpt {
|
||||
font-size: 1.2rem;
|
||||
color: map-get($gray-shades, 600);
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.document-lifecycle-live {
|
||||
@include border-radius(3px);
|
||||
@include ease-in();
|
||||
display: inline-block;
|
||||
border: 2px solid map-get($green-shades, 700);
|
||||
padding: 2px 10px;
|
||||
color: map-get($gray-shades, 600);
|
||||
background-color: map-get($gray-shades, 100);
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
|
||||
&:hover {
|
||||
color: map-get($green-shades, 500);
|
||||
}
|
||||
}
|
||||
|
||||
.document-lifecycle-draft {
|
||||
@extend .document-lifecycle-live;
|
||||
border: 2px solid map-get($yellow-shades, 700);
|
||||
|
||||
&:hover {
|
||||
color: map-get($yellow-shades, 700);
|
||||
}
|
||||
}
|
||||
|
||||
.document-protection-unlocked {
|
||||
@include border-radius(3px);
|
||||
@include ease-in();
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
color: map-get($gray-shades, 600);
|
||||
background-color: map-get($gray-shades, 100);
|
||||
border: 2px solid map-get($gray-shades, 600);
|
||||
|
||||
&:hover {
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
}
|
||||
|
||||
.document-protection-review {
|
||||
@extend .document-protection-unlocked;
|
||||
border: 2px solid map-get($yellow-shades, 700);
|
||||
|
||||
&:hover {
|
||||
color: map-get($yellow-shades, 700);
|
||||
}
|
||||
}
|
||||
|
||||
.document-protection-locked {
|
||||
@extend .document-protection-unlocked;
|
||||
border: 2px solid map-get($red-shades, 600);
|
||||
|
||||
&:hover {
|
||||
color: map-get($red-shades, 600);
|
||||
}
|
||||
}
|
||||
|
||||
.document-category {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: map-get($gray-shades, 600);
|
||||
background-color: map-get($gray-shades, 100);
|
||||
border: 2px solid map-get($gray-shades, 600);
|
||||
border-left: 13px solid map-get($gray-shades, 600);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.document-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
color: map-get($gray-shades, 600);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
.document-tabnav {
|
||||
margin: 20px 0 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.document-structure {
|
||||
margin: 0 0 0 0;
|
||||
|
||||
> .page-header {
|
||||
margin: 0 0 2rem 0;
|
||||
|
||||
> .page-number {
|
||||
color: map-get($gray-shades, 600);
|
||||
background-color: map-get($gray-shades, 200);
|
||||
padding: 0.2rem 1rem;
|
||||
font-size: 1.8rem;
|
||||
margin: 0 1.5rem 0 0;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
> .page-state-pending {
|
||||
color: map-get($red-shades, 600);
|
||||
}
|
||||
|
||||
> .page-state-review {
|
||||
color: map-get($green-shades, 600);
|
||||
}
|
||||
|
||||
> .page-title {
|
||||
display: inline;
|
||||
font-size: 2.0rem;
|
||||
font-weight: bold;
|
||||
margin: 16px 0;
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
}
|
||||
|
||||
> .protection-table {
|
||||
> tbody, > thead {
|
||||
> tr, > th {
|
||||
> td, > th {
|
||||
margin: 0;
|
||||
padding: 10px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> thead {
|
||||
> tr {
|
||||
> th {
|
||||
background-color: map-get($gray-shades, 100);
|
||||
color: map-get($gray-shades, 600);
|
||||
}
|
||||
|
||||
> th:first-child {
|
||||
background-color: $color-white !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
97
gui/app/styles/core/view/document/meta.scss
Normal file
97
gui/app/styles/core/view/document/meta.scss
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
.document-meta {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .title {
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: map-get($gray-shades, 700);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
> .meta-label {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 5px 5px 5px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
background-color: map-get($gray-shades, 200);
|
||||
color: map-get($gray-shades, 700);
|
||||
|
||||
> .dicon {
|
||||
vertical-align: middle;
|
||||
font-size: 1.2rem;
|
||||
margin-right: 5px;
|
||||
color: map-get($gray-shades, 600);
|
||||
}
|
||||
}
|
||||
|
||||
> .label-approval {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 5px 5px 5px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
background-color: map-get($gray-shades, 700);
|
||||
color: map-get($gray-shades, 100);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> .label-draft {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 5px 5px 5px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
background-color: map-get($yellow-shades, 500);
|
||||
color: map-get($gray-shades, 100);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> .label-live {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 5px 5px 5px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
background-color: map-get($green-shades, 500);
|
||||
color: map-get($gray-shades, 100);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> .label-archived {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 5px 5px 5px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
background-color: map-get($red-shades, 300);
|
||||
color: map-get($gray-shades, 800);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> .document-heading {
|
||||
.name {
|
||||
color: map-get($gray-shades, 900);
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: map-get($gray-shades, 700);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
72
gui/app/styles/core/view/document/section.scss
Normal file
72
gui/app/styles/core/view/document/section.scss
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
.section-heading {
|
||||
margin: 0 0 0 0;
|
||||
|
||||
> .page-header {
|
||||
margin: 0 0 2rem 0;
|
||||
|
||||
> .page-number {
|
||||
color: $theme-500;
|
||||
background-color: $theme-100;
|
||||
padding: 0.2rem 1rem;
|
||||
font-size: 1.8rem;
|
||||
margin: 0 1.5rem 0 0;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
> .page-state-pending {
|
||||
color: map-get($red-shades, 600);
|
||||
}
|
||||
|
||||
> .page-state-review {
|
||||
color: map-get($green-shades, 600);
|
||||
}
|
||||
|
||||
> .page-title {
|
||||
display: inline;
|
||||
font-size: 2.0rem;
|
||||
font-weight: bold;
|
||||
margin: 16px 0;
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
}
|
||||
|
||||
> .section-toolbar {
|
||||
> i {
|
||||
font-size: 20px;
|
||||
color: map-get($gray-shades, 400);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: map-get($gray-shades, 700);
|
||||
}
|
||||
}
|
||||
|
||||
> .gap {
|
||||
width: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.start-section {
|
||||
@include border-radius(5px);
|
||||
@extend .no-select;
|
||||
text-align: right;
|
||||
margin: 2rem 0;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
|
||||
> i {
|
||||
background-color: map-get($yellow-shades, 100);
|
||||
color: map-get($yellow-shades, 500);
|
||||
vertical-align: middle;
|
||||
padding: 0.5rem;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover {
|
||||
color: map-get($yellow-shades, 700);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
.label-approval {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 10px 5px 13px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
background-color: map-get($gray-shades, 700);
|
||||
color: map-get($gray-shades, 100);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.label-draft {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 10px 5px 13px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
background-color: map-get($yellow-shades, 500);
|
||||
color: map-get($gray-shades, 100);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.label-live {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 10px 5px 13px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
background-color: map-get($green-shades, 500);
|
||||
color: map-get($gray-shades, 100);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.label-archived {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 10px 5px 13px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
background-color: map-get($red-shades, 300);
|
||||
color: map-get($gray-shades, 800);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue