1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-22 06:39:43 +02:00

Make Login action more prominent

Closes #247
This commit is contained in:
Harvey Kandola 2019-05-20 15:21:33 +01:00
parent 62c3cd03ad
commit 14f313a836
25 changed files with 499 additions and 358 deletions

View file

@ -17,7 +17,6 @@ import AuthMixin from '../../mixins/auth';
import Component from '@ember/component'; import Component from '@ember/component';
export default Component.extend(AuthMixin, { export default Component.extend(AuthMixin, {
classNames: ["section"],
router: service(), router: service(),
documentService: service('document'), documentService: service('document'),
folderService: service('folder'), folderService: service('folder'),

View file

@ -0,0 +1,17 @@
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
//
// This software (Documize Community Edition) is licensed under
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
//
// You can operate outside the AGPL restrictions by purchasing
// Documize Enterprise Edition and obtaining a commercial license
// by contacting <sales@documize.com>.
//
// https://documize.com
import Component from '@ember/component';
export default Component.extend({
tagName: 'div',
classNames: ['master-grid-container'],
});

View file

@ -0,0 +1,17 @@
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
//
// This software (Documize Community Edition) is licensed under
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
//
// You can operate outside the AGPL restrictions by purchasing
// Documize Enterprise Edition and obtaining a commercial license
// by contacting <sales@documize.com>.
//
// https://documize.com
import Component from '@ember/component';
export default Component.extend({
tagName: 'div',
classNames: ['master-content'],
});

View file

@ -0,0 +1,17 @@
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
//
// This software (Documize Community Edition) is licensed under
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
//
// You can operate outside the AGPL restrictions by purchasing
// Documize Enterprise Edition and obtaining a commercial license
// by contacting <sales@documize.com>.
//
// https://documize.com
import Component from '@ember/component';
export default Component.extend({
tagName: 'div',
classNames: ['master-sidebar'],
});

View file

@ -341,6 +341,7 @@ let constants = EmberObject.extend({
Invite: 'Invite', Invite: 'Invite',
Join: 'Join', Join: 'Join',
Leave: 'Leave', Leave: 'Leave',
Login: 'Login',
Move: 'Move', Move: 'Move',
Next: 'Next', Next: 'Next',
OK: 'OK', OK: 'OK',

View file

@ -1,71 +1,83 @@
{{#layout/master-sidebar selectedItem="settings"}} <Layout::MasterNavigation @selectedItem="settings" />
<Ui::UiSpacer @size=300 /> <Layout::MasterToolbar>
<div class="zone-1" />
<div class="section"> <div class="zone-2">
<div class="title">administration</div> <div class="label color-gray-700">
<div class="list"> Documize {{appMeta.edition}} Edition {{appMeta.version}} (build {{appMeta.revision}})
{{#link-to "customize.general" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Settings}} />
<div class="name">General</div>
{{/link-to}}
{{#link-to "customize.labels" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Checkbox}} />
<div class="name">Labels</div>
{{/link-to}}
{{#link-to "customize.folders" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Grid}} />
<div class="name">Spaces</div>
{{/link-to}}
{{#link-to "customize.users" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Person}} />
<div class="name">User Management</div>
{{/link-to}}
{{#link-to "customize.groups" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.People}} />
<div class="name">User Groups</div>
{{/link-to}}
{{#link-to "customize.integrations" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Integrations}} />
<div class="name">Integrations</div>
{{/link-to}}
{{#if session.isGlobalAdmin}}
{{#link-to "customize.smtp" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Send}} />
<div class="name">Mail Server</div>
{{/link-to}}
{{#link-to "customize.auth" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Locked}} />
<div class="name">Authentication</div>
{{/link-to}}
{{#link-to "customize.search" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Search}} />
<div class="name">Search</div>
{{/link-to}}
{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
{{#link-to "customize.audit" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.ButtonAction}} />
<div class="name">Audit Log</div>
{{/link-to}}
{{/if}}
{{/if}}
{{#link-to "customize.backup" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Database}} />
<div class="name">Backup & Restore</div>
{{/link-to}}
{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
{{#link-to "customize.billing" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Handshake}} />
<div class="name">Billing</div>
{{/link-to}}
{{/if}}
{{#link-to "customize.product" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Announce}} />
<div class="name">Changelog</div>
{{/link-to}}
</div> </div>
</div> </div>
{{/layout/master-sidebar}} <div class="zone-3" />
</Layout::MasterToolbar>
{{#layout/master-content}} <Layout::Grid::Container>
{{outlet}} <Layout::Grid::Sidebar>
{{/layout/master-content}} <div class="sidebar-content">
<div class="section">
<div class="title">administration</div>
<div class="list">
{{#link-to "customize.general" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Settings}} />
<div class="name">General</div>
{{/link-to}}
{{#link-to "customize.labels" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Checkbox}} />
<div class="name">Labels</div>
{{/link-to}}
{{#link-to "customize.folders" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Grid}} />
<div class="name">Spaces</div>
{{/link-to}}
{{#link-to "customize.users" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Person}} />
<div class="name">User Management</div>
{{/link-to}}
{{#link-to "customize.groups" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.People}} />
<div class="name">User Groups</div>
{{/link-to}}
{{#link-to "customize.integrations" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Integrations}} />
<div class="name">Integrations</div>
{{/link-to}}
{{#if session.isGlobalAdmin}}
{{#link-to "customize.smtp" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Send}} />
<div class="name">Mail Server</div>
{{/link-to}}
{{#link-to "customize.auth" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Locked}} />
<div class="name">Authentication</div>
{{/link-to}}
{{#link-to "customize.search" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Search}} />
<div class="name">Search</div>
{{/link-to}}
{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
{{#link-to "customize.audit" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.ButtonAction}} />
<div class="name">Audit Log</div>
{{/link-to}}
{{/if}}
{{/if}}
{{#link-to "customize.backup" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Database}} />
<div class="name">Backup & Restore</div>
{{/link-to}}
{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
{{#link-to "customize.billing" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Handshake}} />
<div class="name">Billing</div>
{{/link-to}}
{{/if}}
{{#link-to "customize.product" activeClass="selected" class="item" tagName="div"}}
<i class={{concat "dicon " constants.Icon.Announce}} />
<div class="name">Changelog</div>
{{/link-to}}
</div>
</div>
</div>
</Layout::Grid::Sidebar>
<Layout::Grid::Content>
{{outlet}}
</Layout::Grid::Content>
</Layout::Grid::Container>

View file

@ -1,4 +1,12 @@
{{#layout/master-sidebar}} <Layout::MasterNavigation />
<Layout::MasterToolbar>
<div class="zone-1" />
<div class="zone-2" />
<div class="zone-3">
</div>
</Layout::MasterToolbar>
<Layout::Grid::Container>
{{folder/space-sidebar {{folder/space-sidebar
spaces=model.folders spaces=model.folders
space=model.folder space=model.folder
@ -17,7 +25,41 @@
categoryFilter=category categoryFilter=category
onFiltered=(action "onFiltered") onFiltered=(action "onFiltered")
onRefresh=(action "onRefresh")}} onRefresh=(action "onRefresh")}}
{{/layout/master-sidebar}}
<Layout::Grid::Sidebar>
<div class="sidebar-content">
<div class="section">
<div class="title">ABOUT</div>
<div class="text">
Documize product updates are released frequently for both
cloud and self-hosted customers.
</div>
<div class="text">
Have an idea, suggestion or some feedback? <a href="mailto:support@documize.com">Get in touch.</a>
</div>
</div>
</div>
</Layout::Grid::Sidebar>
<Layout::Grid::Content>
{{layout/logo-heading
title="Product News"
desc="Latest product news and updates"
icon=constants.Icon.Announce}}
<div class="product-news">
{{{newsContent}}}
<div class="action">
Have an idea? Suggestion or feedback? <a href="mailto:support@documize.com">Get in touch!</a>
</div>
</div>
</Layout::Grid::Content>
</Layout::Grid::Container>
{{#layout/master-content}} {{#layout/master-content}}
<div class="grid-container-6-4"> <div class="grid-container-6-4">

View file

@ -1,9 +1,7 @@
<Layout::MasterNavigation @selectedItem="spaces" /> <Layout::MasterNavigation @selectedItem="spaces" />
<Layout::MasterToolbar> <Layout::MasterToolbar>
<div class="zone-1"> <div class="zone-1" />
</div> <div class="zone-2" />
<div class="zone-2">
</div>
<div class="zone-3"> <div class="zone-3">
{{#if (or session.isEditor session.isAdmin)}} {{#if (or session.isEditor session.isAdmin)}}
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true tooltip="New space"}} {{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true tooltip="New space"}}
@ -16,13 +14,9 @@
</div> </div>
</Layout::MasterToolbar> </Layout::MasterToolbar>
<div class="master-container"> <Layout::Grid::Container>
<div class="master-sidebar"> <Layout::Grid::Sidebar>
<div class="sidebar-content"> <div class="sidebar-content">
{{yield}}
<Ui::UiSpacer @size=300 />
<div class="section"> <div class="section">
<div class="title">filter</div> <div class="title">filter</div>
<div class="list"> <div class="list">
@ -67,11 +61,10 @@
{{/if}} {{/if}}
</div> </div>
</div> </div>
</div> </Layout::Grid::Sidebar>
<div class="master-content"> <Layout::Grid::Content>
{{layout/logo-heading title=appMeta.title desc=appMeta.message logo=true}} {{layout/logo-heading title=appMeta.title desc=appMeta.message logo=true}}
<Ui::UiSpacer @size=400 />
{{spaces/space-list spaces=selectedSpaces labels=labels}} {{spaces/space-list spaces=selectedSpaces labels=labels}}
@ -140,9 +133,5 @@
</div> </div>
</div> </div>
</div> </div>
</div> </Layout::Grid::Content>
</Layout::Grid::Container>
</div>
<Layout::MasterContent>
</Layout::MasterContent>

View file

@ -1,11 +1,26 @@
{{#layout/master-sidebar}} <Layout::MasterNavigation />
{{/layout/master-sidebar}} <Layout::MasterToolbar />
{{#layout/master-content}} <Layout::Grid::Container>
{{layout/logo-heading <Layout::Grid::Sidebar>
title=session.user.fullname <div class="sidebar-content">
desc="Manage you profile and password" <div class="section">
icon=constants.Icon.Person}} <div class="title">PROFILE</div>
<div class="text">
Set your personal information or reset your password.
</div>
<div class="text">
Have a product idea, suggestion or some feedback? <a href="mailto:support@documize.com">Get in touch.</a>
</div>
</div>
</div>
</Layout::Grid::Sidebar>
<Layout::Grid::Content>
{{layout/logo-heading
title=session.user.fullname
desc="Manage your profile and password"
icon=constants.Icon.Person}}
{{user/user-profile model=model save=(action "save")}} {{user/user-profile model=model save=(action "save")}}
{{/layout/master-content}} </Layout::Grid::Content>
</Layout::Grid::Container>

View file

@ -1,75 +1,79 @@
{{#layout/master-sidebar selectedItem="search"}} <Layout::MasterNavigation @selectedItem="search" />
<Ui::UiSpacer @size=300 /> <Layout::MasterToolbar />
<div class="section"> <Layout::Grid::Container>
<div class="title">Match Filter</div> <Layout::Grid::Sidebar>
<div class="list"> <div class="sidebar-content">
<div class="item"> <div class="section">
{{input id="search-1" type="checkbox" checked=matchFilter.matchDoc}} <div class="title">Match Filter</div>
<label for="search-1" class="name">Document name</label> <div class="list">
<div class="item">
{{input id="search-1" type="checkbox" checked=matchFilter.matchDoc}}
<label for="search-1" class="name">Document name</label>
</div>
<div class="item">
{{input id="search-2" type="checkbox" checked=matchFilter.matchContent}}
<label for="search-2" class="name">Document content</label>
</div>
<div class="item">
{{input id="search-3" type="checkbox" checked=matchFilter.matchTag}}
<label for="search-3" class="name">Tag name</label>
</div>
<div class="item">
{{input id="search-4" type="checkbox" checked=matchFilter.matchFile}}
<label for="search-4" class="name">Attachment name</label>
</div>
</div>
</div> </div>
<div class="item"> <Ui::UiSpacer @size=200 />
{{input id="search-2" type="checkbox" checked=matchFilter.matchContent}} <div class="section">
<label for="search-2" class="name">Document content</label> <div class="title">query examples</div>
</div> <div class="view-search">
<div class="item"> {{#if (eq appMeta.storageProvider constants.StoreProvider.MySQL)}}
{{input id="search-3" type="checkbox" checked=matchFilter.matchTag}} <div class="syntax">
<label for="search-3" class="name">Tag name</label> <div class="example">apple banana</div>
</div> <div class="explain">Show results that contain at least one of the two words</div>
<div class="item"> <div class="example">+apple +banana</div>
{{input id="search-4" type="checkbox" checked=matchFilter.matchFile}} <div class="explain">Show results that contain both words</div>
<label for="search-4" class="name">Attachment name</label> <div class="example">+apple macintosh</div>
<div class="explain">Show results that contain the word "apple", but rank rows higher if they also contain "macintosh"</div>
<div class="example">+apple -macintosh</div>
<div class="explain">Show results that contain the word "apple" but not "macintosh"</div>
<div class="example">+apple +(&gt;turnover &lt;strudel)</div>
<div class="explain">Show results that contain the words "apple" and "turnover", or "apple" and "strudel" (in any order), but rank "apple turnover" higher than "apple strudel"</div>
<div class="example">apple*</div>
<div class="explain">Show results that contain words such as "apple", "apples", "applesauce", or "applet"</div>
<div class="example">"some words"</div>
<div class="explain">Show results that contain the exact phrase "some words" (for example, rows that contain "some words of wisdom" but not "some noise words")</div>
</div>
{{/if}}
{{#if (eq appMeta.storageProvider constants.StoreProvider.PostgreSQL)}}
<div class="syntax">
<div class="example">apple | banana</div>
<div class="explain">Show results that contain at either word</div>
<div class="example">apple & banana</div>
<div class="explain">Show results that contain both words</div>
<div class="example">apple !macintosh</div>
<div class="explain">Show results that contain the word "apple" but not "macintosh"</div>
<div class="example">google & (apple | microsoft) & !ibm</div>
<div class="explain">Show results that have "google", either "apple" or "microsoft" but not "ibm"</div>
</div>
{{/if}}
{{#if (eq appMeta.storageProvider constants.StoreProvider.SQLServer)}}
{{/if}}
</div>
</div> </div>
</div> </div>
</div> </Layout::Grid::Sidebar>
<Ui::UiSpacer @size=200 />
<div class="section"> <Layout::Grid::Content>
<div class="title">query examples</div> {{layout/logo-heading
<div class="view-search"> title="Search"
{{#if (eq appMeta.storageProvider constants.StoreProvider.MySQL)}} desc="Find content"
<div class="syntax"> icon=constants.Icon.Search}}
<div class="example">apple banana</div>
<div class="explain">Show results that contain at least one of the two words</div>
<div class="example">+apple +banana</div>
<div class="explain">Show results that contain both words</div>
<div class="example">+apple macintosh</div>
<div class="explain">Show results that contain the word "apple", but rank rows higher if they also contain "macintosh"</div>
<div class="example">+apple -macintosh</div>
<div class="explain">Show results that contain the word "apple" but not "macintosh"</div>
<div class="example">+apple +(&gt;turnover &lt;strudel)</div>
<div class="explain">Show results that contain the words "apple" and "turnover", or "apple" and "strudel" (in any order), but rank "apple turnover" higher than "apple strudel"</div>
<div class="example">apple*</div>
<div class="explain">Show results that contain words such as "apple", "apples", "applesauce", or "applet"</div>
<div class="example">"some words"</div>
<div class="explain">Show results that contain the exact phrase "some words" (for example, rows that contain "some words of wisdom" but not "some noise words")</div>
</div>
{{/if}}
{{#if (eq appMeta.storageProvider constants.StoreProvider.PostgreSQL)}}
<div class="syntax">
<div class="example">apple | banana</div>
<div class="explain">Show results that contain at either word</div>
<div class="example">apple & banana</div>
<div class="explain">Show results that contain both words</div>
<div class="example">apple !macintosh</div>
<div class="explain">Show results that contain the word "apple" but not "macintosh"</div>
<div class="example">google & (apple | microsoft) & !ibm</div>
<div class="explain">Show results that have "google", either "apple" or "microsoft" but not "ibm"</div>
</div>
{{/if}}
{{#if (eq appMeta.storageProvider constants.StoreProvider.SQLServer)}}
{{/if}}
</div>
</div>
{{/layout/master-sidebar}}
{{#layout/master-content}} {{search/search-view
{{layout/logo-heading filter=filter
title="Search" matchFilter=matchFilter}}
desc="Find content" </Layout::Grid::Content>
icon=constants.Icon.Search}} </Layout::Grid::Container>
{{search/search-view
filter=filter
matchFilter=matchFilter}}
{{/layout/master-content}}

View file

@ -12,4 +12,7 @@
import Route from '@ember/routing/route'; import Route from '@ember/routing/route';
export default Route.extend({ export default Route.extend({
activate() {
this.get('browser').setTitle('Product News');
}
}); });

View file

@ -1,26 +1,40 @@
{{#layout/master-sidebar}} <Layout::MasterNavigation />
<Ui::UiSpacer @size=300 /> <Layout::MasterToolbar>
<div class="zone-1" />
<div class="section"> <div class="zone-2">
<div class="title">SUMMARY</div> <div class="label color-gray-700">
<Ui::UiSpacer @size=100 /> Documize {{appMeta.edition}} Edition {{appMeta.version}} (build {{appMeta.revision}})
<p>Documize {{appMeta.edition}} Edition</p>
<p>Version {{appMeta.version}}</p>
<p>Build {{appMeta.revision}}</p>
</div>
{{/layout/master-sidebar}}
{{#layout/master-content}}
{{layout/logo-heading
title="Product News"
desc="Latest product news and updates from Documize Inc."
icon=constants.Icon.Announce}}
<div class="product-news">
{{{newsContent}}}
<div class="action">
Have an idea? Suggestion or feedback? <a href="mailto:support@documize.com">Get in touch!</a>
</div> </div>
</div> </div>
{{/layout/master-content}} <div class="zone-3" />
</Layout::MasterToolbar>
<Layout::Grid::Container>
<Layout::Grid::Sidebar>
<div class="sidebar-content">
<div class="section">
<div class="title">ABOUT</div>
<div class="text">
Documize product updates are released frequently for both
cloud and self-hosted customers.
</div>
<div class="text">
Have an idea, suggestion or some feedback? <a href="mailto:support@documize.com">Get in touch.</a>
</div>
</div>
</div>
</Layout::Grid::Sidebar>
<Layout::Grid::Content>
{{layout/logo-heading
title="Product News"
desc="Latest product news and updates"
icon=constants.Icon.Announce}}
<div class="product-news">
{{{newsContent}}}
<div class="action">
Have an idea? Suggestion or feedback? <a href="mailto:support@documize.com">Get in touch!</a>
</div>
</div>
</Layout::Grid::Content>
</Layout::Grid::Container>

View file

@ -153,9 +153,11 @@ $color-white-dark-1: #f5f5f5;
* Specialty colors * Specialty colors
**************************************************************/ **************************************************************/
// Documents, spaces card background color // Documents and spaces card background color
$color-card: #F6F4EE; $color-card: #F6F4EE;
$color-sidebar: #f2f8fd; $color-sidebar: #F6F4EE;
// $color-card: #F6F4EE;
// $color-sidebar: #f2f8fd;
/************************************************************** /**************************************************************
* Theme colors. * Theme colors.

View file

@ -1,5 +1,5 @@
@import "grid.scss"; @import "grid.scss";
@import "spacing.scss"; @import "spacing.scss";
@import "headings.scss"; @import "headings.scss";
@import "bars.scss"; @import "layout.scss";
@import "sidebar.scss"; @import "sidebar.scss";

View file

@ -1,6 +1,6 @@
// CSS GRID LAYOUT // *****************************************************************
// Define mobile-first layout for top navigation bar and toolbar.
// Mobile-first layout // *****************************************************************
.master-navigation { .master-navigation {
display: block; display: block;
height: auto; height: auto;
@ -8,7 +8,7 @@
> .navbar { > .navbar {
display: block; display: block;
height: auto; height: 40px;
width: 100%; width: 100%;
background-color: $theme-500; background-color: $theme-500;
text-align: center; text-align: center;
@ -50,6 +50,14 @@
} }
} }
> a.option {
color: $theme-300;
&:hover {
color: $color-white;
}
}
> .invalid-plan { > .invalid-plan {
> .dicon { > .dicon {
color: map-get($yellow-shades, 600) !important; color: map-get($yellow-shades, 600) !important;
@ -86,10 +94,10 @@
> .toolbar { > .toolbar {
display: block; display: block;
height: auto; height: auto;
min-height: 40px; height: 50px;
width: 100%; width: 100%;
background-color: map-get($gray-shades, 100);
background-color: $color-sidebar; background-color: $color-sidebar;
background-color: $theme-100;
text-align: center; text-align: center;
padding: 0; padding: 0;
z-index: 999; z-index: 999;
@ -107,16 +115,31 @@
> div[class^="zone-"], div[class*=" zone-"] { > div[class^="zone-"], div[class*=" zone-"] {
margin: 0; margin: 0;
padding: 10px 10px; padding: 10px 10px;
justify-content: center;
> .label {
font-size: 1rem;
}
} }
} }
} }
} }
.master-container { // *****************************************************************
// Define mobile-first layout for main content zone with a sidebar.
// *****************************************************************
.master-grid-container {
display: block; display: block;
height: auto; height: auto;
width: 100%; width: 100%;
.master-sidebar {
display: block;
height: auto;
width: 100%;
padding: 10px;
}
.master-content { .master-content {
display: block; display: block;
height: auto; height: auto;
@ -125,47 +148,39 @@
} }
} }
// Desktop layout adjustments // $sidebar-height: calc(100vh - 90px);
// Small screen starts around 900px $sidebar-height: auto;
@media (min-width: $display-break-1) and (min-height: 650px) {
.master-navigation {
> .navbar {
// Tablet starts around 700px
@media (min-width: $display-break-1) {
.master-grid-container {
display: grid;
grid-template-columns: 200px auto;
.master-sidebar {
width: 200px;
height: $sidebar-height;
// overflow-x: hidden;
// overflow-y: auto;
padding: 20px 15px;
} }
> .toolbar { .master-content {
grid-column-start: 2;
padding: 20px;
max-width: calc(100vw - 210px);
} }
} }
} }
// Small screen starts around 900px
@media (min-width: $display-break-2) and (min-height: 650px) {
.master-grid-container {
.master-sidebar-container {
display: block;
height: auto;
width: 100%;
//z-index: 1041; // required if we want to show modals from inside sidebar
}
// Tablet starts around 700px
@media (min-width: $display-break-1) {
.master-container {
display: grid; display: grid;
grid-template-columns: 240px auto; grid-template-columns: 240px auto;
.master-sidebar { .master-sidebar {
width: 200px; width: 240px;
height: auto;
max-height: 90vh;
overflow-x: hidden;
overflow-y: auto;
} }
.master-content { .master-content {
@ -176,69 +191,35 @@
} }
} }
// Small screen starts around 900px
@media (min-width: $display-break-2) and (min-height: 650px) {
.master-container {
display: grid;
grid-template-columns: 290px auto;
.master-content {
grid-column-start: 2;
padding: 20px;
max-width: calc(100vw - 300px);
}
}
.master-sidebar-container {
position: fixed;
width: 290px;
height: 100vh;
.master-sidebar {
position: fixed;
top: 0;
left: 70px;
width: 220px;
height: 100vh;
}
}
}
// Medium screen starts around 1200px // Medium screen starts around 1200px
@media (min-width: $display-break-3) and (min-height: 650px) { @media (min-width: $display-break-3) and (min-height: 650px) {
.master-container { .master-grid-container {
display: grid; display: grid;
grid-template-columns: 320px auto; grid-template-columns: 300px auto;
.master-sidebar {
width: 300px;
padding: 40px 20px;
}
.master-content { .master-content {
grid-column-start: 2; grid-column-start: 2;
padding: 40px 30px; padding: 40px 30px;
max-width: calc(100vw - 330px); max-width: calc(100vw - 310px);
}
}
.master-sidebar-container {
position: fixed;
width: 320px;
height: 100vh;
.master-sidebar {
position: fixed;
top: 0;
left: 70px;
width: 250px;
height: 100vh;
padding: 20px 10px;
} }
} }
} }
// Large screen starts around 1600px // Large screen starts around 1600px
@media (min-width: $display-break-4) and (min-height: 650px) { @media (min-width: $display-break-4) and (min-height: 650px) {
.master-container { .master-grid-container {
display: grid; display: grid;
grid-template-columns: 370px minmax(auto, 1200px); grid-template-columns: 350px minmax(auto, 1200px);
.master-sidebar {
width: 350px;
padding: 40px 20px;
}
.master-content { .master-content {
grid-column-start: 2; grid-column-start: 2;
@ -246,19 +227,43 @@
max-width: 1200px; max-width: 1200px;
} }
} }
}
.master-sidebar-container { // *****************************************************************
position: fixed; // Define mobile-first layout for content without a sidebar.
width: 370px; // *****************************************************************
height: 100vh; .master-container {
display: block;
height: auto;
width: 100%;
padding: 20px;
}
.master-sidebar { // Tablet starts around 700px
position: fixed; @media (min-width: $display-break-1) {
top: 0; .master-container {
left: 70px; padding: 20px;
width: 300px; }
height: 100vh; }
padding: 20px 15px;
} // Small screen starts around 900px
@media (min-width: $display-break-2) and (min-height: 650px) {
.master-container {
padding: 20px;
}
}
// Medium screen starts around 1200px
@media (min-width: $display-break-3) and (min-height: 650px) {
.master-container {
padding: 30px;
}
}
// Large screen starts around 1600px
@media (min-width: $display-break-4) and (min-height: 650px) {
.master-container {
padding: 40px;
max-width: 1200px;
} }
} }

View file

@ -1,7 +1,10 @@
.sidebar-content { .sidebar-content {
display: block; display: block;
position: relative; position: relative;
// @extend .text-truncate; padding: 20px 10px 10px 10px;
background-color: $color-sidebar;
@include border-radius(4px);
border: 1px solid map-get($gray-shades, 100);
> .section { > .section {
margin: 0; margin: 0;

View file

@ -1,56 +1,58 @@
<Ui::UiSpacer @size=300 /> <Layout::Grid::Sidebar>
<div class="sidebar-content">
<div class="title">filter</div> <div class="title">filter</div>
<div class="list"> <div class="list">
<div class="item {{if (eq selectedFilter "space") "selected"}}" {{action "onDocumentFilter" "space" space.id}}> <div class="item {{if (eq selectedFilter "space") "selected"}}" {{action "onDocumentFilter" "space" space.id}}>
<i class={{concat "dicon " constants.Icon.Filter}} />
<div class="name">All ({{documents.length}})</div>
</div>
{{#if hasCategories}}
{{#if (gt rootDocCount 0)}}
<div class="item {{if (eq selectedFilter "uncategorized") "selected"}}" {{action "onDocumentFilter" "uncategorized" space.id}}>
<i class={{concat "dicon " constants.Icon.Filter}} /> <i class={{concat "dicon " constants.Icon.Filter}} />
<div class="name">Uncategorized ({{rootDocCount}})</div> <div class="name">All ({{documents.length}})</div>
</div> </div>
{{/if}} {{#if hasCategories}}
{{/if}} {{#if (gt rootDocCount 0)}}
{{#if permissions.documentTemplate}} <div class="item {{if (eq selectedFilter "uncategorized") "selected"}}" {{action "onDocumentFilter" "uncategorized" space.id}}>
<div class="item {{if (eq selectedFilter "template") "selected"}}" {{action "onDocumentFilter" "template" space.id}}> <i class={{concat "dicon " constants.Icon.Filter}} />
<i class={{concat "dicon " constants.Icon.Filter}} /> <div class="name">Uncategorized ({{rootDocCount}})</div>
<div class="name">Templates ({{templates.length}})</div> </div>
</div> {{/if}}
{{/if}} {{/if}}
{{#if permissions.documentLifecycle}} {{#if permissions.documentTemplate}}
<div class="item {{if (eq selectedFilter "draft") "selected"}}" {{action "onDocumentFilter" "draft" space.id}}> <div class="item {{if (eq selectedFilter "template") "selected"}}" {{action "onDocumentFilter" "template" space.id}}>
<i class={{concat "dicon " constants.Icon.Filter}} /> <i class={{concat "dicon " constants.Icon.Filter}} />
<div class="name">Drafts ({{documentsDraft.length}})</div> <div class="name">Templates ({{templates.length}})</div>
</div> </div>
<div class="item {{if (eq selectedFilter "live") "selected"}}" {{action "onDocumentFilter" "live" space.id}}> {{/if}}
<i class={{concat "dicon " constants.Icon.Filter}} /> {{#if permissions.documentLifecycle}}
<div class="name">Live ({{documentsLive.length}})</div> <div class="item {{if (eq selectedFilter "draft") "selected"}}" {{action "onDocumentFilter" "draft" space.id}}>
</div> <i class={{concat "dicon " constants.Icon.Filter}} />
{{/if}} <div class="name">Drafts ({{documentsDraft.length}})</div>
<div class="item {{if (eq selectedFilter "add") "selected"}}" {{action "onDocumentFilter" "add" space.id}}> </div>
<i class={{concat "dicon " constants.Icon.Filter}} /> <div class="item {{if (eq selectedFilter "live") "selected"}}" {{action "onDocumentFilter" "live" space.id}}>
<div class="name">Added recently ({{recentAdd.length}})</div> <i class={{concat "dicon " constants.Icon.Filter}} />
</div> <div class="name">Live ({{documentsLive.length}})</div>
<div class="item {{if (eq selectedFilter "update") "selected"}}" {{action "onDocumentFilter" "update" space.id}}> </div>
<i class={{concat "dicon " constants.Icon.Filter}} /> {{/if}}
<div class="name">Updated recently ({{recentUpdate.length}})</div> <div class="item {{if (eq selectedFilter "add") "selected"}}" {{action "onDocumentFilter" "add" space.id}}>
</div> <i class={{concat "dicon " constants.Icon.Filter}} />
</div> <div class="name">Added recently ({{recentAdd.length}})</div>
<Ui::UiSpacer @size=200 />
<div class="title">category</div>
<div class="list">
{{#if categories}}
{{#each categories as |cat|}}
<div class="item {{if cat.selected "selected"}}" {{action "onDocumentFilter" "category" cat.id}}>
<i class={{concat "dicon " constants.Icon.Category}} />
<div class="name">{{cat.category}} ({{cat.docCount}})</div>
</div> </div>
{{/each}} <div class="item {{if (eq selectedFilter "update") "selected"}}" {{action "onDocumentFilter" "update" space.id}}>
{{else}} <i class={{concat "dicon " constants.Icon.Filter}} />
{{/if}} <div class="name">Updated recently ({{recentUpdate.length}})</div>
</div> </div>
</div>
<Ui::UiSpacer @size=200 />
<div class="title">category</div>
<div class="list">
{{#if categories}}
{{#each categories as |cat|}}
<div class="item {{if cat.selected "selected"}}" {{action "onDocumentFilter" "category" cat.id}}>
<i class={{concat "dicon " constants.Icon.Category}} />
<div class="name">{{cat.category}} ({{cat.docCount}})</div>
</div>
{{/each}}
{{else}}
{{/if}}
</div>
</div>
</Layout::Grid::Sidebar>

View file

@ -0,0 +1,2 @@
{{yield}}

View file

@ -0,0 +1,2 @@
{{yield}}

View file

@ -0,0 +1 @@
{{yield}}

View file

@ -0,0 +1 @@
{{yield}}

View file

@ -1,4 +0,0 @@
<div class="master-content">
{{yield}}
</div>
<Ui::UiSpacer @size=300 />

View file

@ -101,7 +101,7 @@
{{/if}} {{/if}}
{{/if}} {{/if}}
<div class="divider"></div> <div class="divider"></div>
<a class={{if hasWhatsNew "item bold green" "item"}} href="#" {{action "onNew"}}>What's New</a> <a class={{if hasWhatsNew "item bold red" "item"}} href="#" {{action "onNew"}}>What's New</a>
<a href="https://docs.documize.com" target="_blank" class="item">Help</a> <a href="https://docs.documize.com" target="_blank" class="item">Help</a>
{{#if enableLogout}} {{#if enableLogout}}
<div class="divider"></div> <div class="divider"></div>
@ -112,10 +112,8 @@
</div> </div>
</div> </div>
{{else}} {{else}}
{{#link-to "auth.login" class="login"}} {{#link-to "auth.login" class="option"}}
<i class={{concat "dicon " constants.Icon.Unlocked}}> {{constants.Label.Login}}
{{#attach-tooltip showDelay=1000}}Login{{/attach-tooltip}}
</i>
{{/link-to}} {{/link-to}}
{{/if}} {{/if}}
</div> </div>

View file

@ -3,4 +3,3 @@
{{yield}} {{yield}}
</div> </div>
</div> </div>