mirror of
https://github.com/documize/community.git
synced 2025-08-02 12:05:23 +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
|
|
@ -25,7 +25,7 @@ $display-break-5: 1800px;
|
|||
justify-self: self-start;
|
||||
}
|
||||
|
||||
// X- axis alignment
|
||||
// X-axis alignment
|
||||
.grid-cell-left {
|
||||
justify-self: self-end;
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@ $display-break-5: 1800px;
|
|||
justify-self: center;
|
||||
}
|
||||
|
||||
// Y axis alignment
|
||||
// Y-axis alignment
|
||||
.grid-cell-top {
|
||||
align-self: self-start;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.sidebar-content {
|
||||
display: block;
|
||||
position: relative;
|
||||
// @extend .text-truncate;
|
||||
|
||||
> .section {
|
||||
margin: 0;
|
||||
|
|
@ -13,6 +14,12 @@
|
|||
color: map-get($gray-shades, 700);
|
||||
}
|
||||
|
||||
> .nav-button {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
@extend .no-select;
|
||||
}
|
||||
|
||||
> .center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,6 +31,10 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text-case-normal {
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.bold-100 { font-weight: 100; }
|
||||
.bold-200 { font-weight: 200; }
|
||||
.bold-300 { font-weight: 300; }
|
||||
|
|
|
|||
|
|
@ -48,6 +48,17 @@ a.broken-link {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.no-width {
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -56,11 +67,6 @@ a.broken-link {
|
|||
cursor: auto !important;
|
||||
}
|
||||
|
||||
.no-width {
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.absolute-center {
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
|
|
@ -77,37 +83,39 @@ a.broken-link {
|
|||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.display-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.display-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: none;
|
||||
}
|
||||
.display-block {
|
||||
display: block;
|
||||
}
|
||||
.display-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.align-top {
|
||||
vertical-align: top!important;
|
||||
}
|
||||
|
||||
.align-middle {
|
||||
vertical-align: middle!important;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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