1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-24 15:49:44 +02:00

Remove Boostrap Grid

Replaced with CSS Grid layout.
This commit is contained in:
Harvey Kandola 2018-12-21 11:46:51 +00:00
parent 61c648a7ac
commit 60d2ef57bb
12 changed files with 252 additions and 308 deletions

View file

@ -1,6 +1,8 @@
<div class="container page-setup padding-100">
<div class="row">
<div class="col-4">
{{ui/ui-spacer size=700}}
<div class="page-setup">
<div class="grid-container-5-5">
<div class="grid-cell-1">
<div>
<img src="/assets/img/setup/logo.png" alt="Documize" class="no-select no-outline margin-top-20">
</div>
@ -8,7 +10,7 @@
<img src="/assets/img/setup/cogs.png" width="157" height="187" alt="Setup new database" class="no-select no-outline">
</div>
</div>
<div class="col-8">
<div class="grid-cell-2 grid-cell-right">
{{setup/documize-setup model=model save=(action "save")}}
</div>
</div>

View file

@ -93,7 +93,7 @@ $link-hover-decoration: none;
// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/grid";
// @import "node_modules/bootstrap/scss/grid";
// @import "node_modules/bootstrap/scss/buttons";
// @import "node_modules/bootstrap/scss/button-group";
@import "node_modules/bootstrap/scss/forms";

View file

@ -47,19 +47,10 @@
}
.non-printable,
header,
footer,
.tabnav-control,
.document-toolbar,
.document-toc,
.tabnav-control,
#nav-bar,
.no-print,
.master-sidebar-container
.page-toolbar,
.start-section,
.start-button,
#top-bar,
#sidebar,
#sub-nav,
.new-section-wizard {
float: none !important;
display: none !important;
@ -111,20 +102,7 @@
color: #000000 !important;
}
.container {
width: auto !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
[class*="col-"] {
float: left !important;
width: 100% !important;
}
.layout-body, .layout-content {
.master-content {
padding: 0 !important;
margin: 0 !important;
display: block !important;

View file

@ -179,12 +179,15 @@
margin: 10px 0;
> .group-name {
display: inline-block;
color: map-get($gray-shades, 800);
font-size: 1rem;
font-weight: 500;
> .group-purpose {
color: map-get($gray-shades, 700);
font-size: 0.9rem;
font-weight: 400;
}
}
}

View file

@ -9,6 +9,21 @@
.content-linker-modal-container {
height: 500px;
overflow-y: auto;
padding: 20px;
> p {
color: map-get($gray-shades, 800);
font-size: 1.1rem;
font-weight: 400;
margin: 1.5rem 0 0.7rem 0;
}
> .nothing {
color: map-get($red-shades, 700);
font-size: 1.1rem;
font-weight: 400;
margin: 0;
}
.dicon {
margin-right: 5px;

View file

@ -8,9 +8,8 @@
display: inline-block;
margin: 0;
padding: 5px 15px;
background-color: $color-white;
color: $theme-500;
border: 1px solid map-get($gray-shades, 300);
background-color: map-get($gray-shades, 100);
border: 1px solid map-get($gray-shades, 200);
font-weight: 500;
font-size: 1.1rem;
text-align: center;
@ -29,7 +28,7 @@
}
&:hover {
background-color: $theme-100;
background-color: map-get($gray-shades, 200);
}
}
@ -47,8 +46,9 @@
}
> .selected {
background-color: $theme-100;
font-weight: 700;
color: map-get($yellow-shades, 700);
background-color: map-get($yellow-shades, 100);
font-weight: 500;
}
}

View file

@ -188,22 +188,16 @@
{{input id="edit-email" type="text" class="form-control" value=editUser.email}}
</div>
{{#if isAuthProviderDocumize}}
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="edit-password">Password</label>
{{input id="edit-password" type="password" class="form-control" value=password.password}}
<small class="form-text text-muted">Optional new password</small>
</div>
<div class="form-group">
<label for="edit-password">Password</label>
{{input id="edit-password" type="password" class="form-control" value=password.password}}
<small class="form-text text-muted">Optional new password</small>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="edit-confirmPassword">Confirm Password</label>
{{input id="edit-confirmPassword" type="password" class="form-control" value=password.confirmation}}
<small class="form-text text-muted">Confirm new password</small>
</div>
<div class="form-group">
<label for="edit-confirmPassword">Confirm Password</label>
{{input id="edit-confirmPassword" type="password" class="form-control" value=password.confirmation}}
<small class="form-text text-muted">Confirm new password</small>
</div>
</div>
{{/if}}
</form>
</div>
@ -236,26 +230,36 @@
<div class="modal-content">
<div class="modal-header">{{selectedUser.fullname}}</div>
<div class="modal-body">
<div class="view-customize">
<div class="group-membership">
{{#each groups as |group|}}
<div class="row item">
<div class="col-10 group-name">{{group.name}}
{{#if group.purpose}}
<span class="group-purpose">&nbsp;&mdash;&nbsp;{{group.purpose}}</span>
{{/if}}
</div>
<div class="col-2 text-right">
{{#if group.isMember}}
{{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Leave onClick=(action "onLeaveGroup" group.id)}}
{{else}}
{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Join onClick=(action "onJoinGroup" group.id)}}
{{/if}}
{{#each groups as |group|}}
<div class="grid-container-8-2">
<div class="grid-cell-1">
<div class="view-customize">
<div class="group-membership">
<div class="item">
<div class="group-name">{{group.name}}
{{#if group.purpose}}
<span class="group-purpose">&nbsp;&mdash;&nbsp;{{group.purpose}}</span>
{{/if}}
</div>
</div>
</div>
</div>
</div>
<div class="grid-cell-2 grid-cell-right">
<div class="view-customize">
<div class="group-membership">
<div class="item">
{{#if group.isMember}}
{{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Leave onClick=(action "onLeaveGroup" group.id)}}
{{else}}
{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Join onClick=(action "onJoinGroup" group.id)}}
{{/if}}
</div>
</div>
</div>
</div>
{{/each}}
</div>
</div>
{{/each}}
</div>
<div class="modal-footer">
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}

View file

@ -5,57 +5,43 @@
<div class="modal-body">
<div id="new-section-wizard" class="new-section-wizard">
<div class="container box">
<div class="row">
<div class="col-12">
<div class="form-group">
{{focus-input type="text" id="new-section-name" value=newSectionName
class=(if newSectionNameMissing "mousetrap form-control form-control-lg is-invalid" "mousetrap form-control form-control-lg")
placeholder="Enter section name" autocomplete="off"}}
</div>
</div>
<div class="box">
<div class="form-group">
{{focus-input type="text" id="new-section-name" value=newSectionName
class=(if newSectionNameMissing "mousetrap form-control form-control-lg is-invalid" "mousetrap form-control form-control-lg")
placeholder="Enter section name" autocomplete="off"}}
</div>
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<div class="new-section-caption">Select Section Type</div>
<ul class="preset-list">
{{#each sections as |section|}}
<li class="item" {{action "onInsertSection" section}}>
<div class="icon">
<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png">
</div>
<div class="title">{{section.title}}</div>
</li>
{{/each}}
</ul>
</div>
</div>
<div class="col-12 col-md-6">
<div class="new-section-caption">Select Re-usable Content</div>
{{#if hasBlocks}}
<ul class="block-list">
{{#each blocks as |block|}}
<li class="item">
{{#attach-tooltip showDelay=1000}}Published by {{block.firstname}} {{block.lastname}}, {{time-ago block.created}} &mdash; used {{ block.used }} times{{/attach-tooltip}}
<div class="details" {{action "onInsertBlock" block}}>
<div class="title text-truncate">{{block.title}}</div>
<div class="desc text-truncate">{{block.excerpt}}</div>
</div>
</li>
{{/each}}
</ul>
{{else}}
<div class="new-section-empty">You have no reusable content &mdash; publish any document section as a template for others to reuse</div>
{{/if}}
</div>
<div class="form-group">
<div class="new-section-caption">Select Section Type</div>
<ul class="preset-list">
{{#each sections as |section|}}
<li class="item" {{action "onInsertSection" section}}>
<div class="icon">
<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png">
</div>
<div class="title">{{section.title}}</div>
</li>
{{/each}}
</ul>
</div>
<div class="new-section-caption">Select Re-usable Content</div>
{{#if hasBlocks}}
<ul class="block-list">
{{#each blocks as |block|}}
<li class="item">
{{#attach-tooltip showDelay=1000}}Published by {{block.firstname}} {{block.lastname}}, {{time-ago block.created}} &mdash; used {{ block.used }} times{{/attach-tooltip}}
<div class="details" {{action "onInsertBlock" block}}>
<div class="title text-truncate">{{block.title}}</div>
<div class="desc text-truncate">{{block.excerpt}}</div>
</div>
</li>
{{/each}}
</ul>
{{else}}
<div class="new-section-empty">You have no reusable content &mdash; publish any document section as a template for others to reuse</div>
{{/if}}
</div>
</div>
</div>
<div class="modal-footer">
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}

View file

@ -1,10 +1,3 @@
<div class="container">
<div class="row">
<div class="col-12">
<div class="block-editor">
{{component editorType document=document space=space page=page meta=meta blockMode=true onCancel=(action "onCancel") onAction=(action "onAction")}}
</div>
</div>
</div>
<div class="block-editor">
{{component editorType document=document space=space page=page meta=meta blockMode=true onCancel=(action "onCancel") onAction=(action "onAction")}}
</div>

View file

@ -3,113 +3,98 @@
<div class="modal-content">
<div class="modal-header">Insert Link</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col mt-3 mb-5">
<ul class="tabnav-control text-center">
<li class="tab {{if tab1Selected "selected"}}" {{action "onTabSelect" 1}}>Section</li>
<li class="tab {{if tab2Selected "selected"}}" {{action "onTabSelect" 2}}>Attachment</li>
<li class="tab {{if tab3Selected "selected"}}" {{action "onTabSelect" 3}}>Search</li>
<li class="tab {{if tab4Selected "selected"}}" {{action "onTabSelect" 4}}>Network</li>
<ul class="tabnav-control text-center">
<li class="tab {{if tab1Selected "selected"}}" {{action "onTabSelect" 1}}>Section</li>
<li class="tab {{if tab2Selected "selected"}}" {{action "onTabSelect" 2}}>Attachment</li>
<li class="tab {{if tab3Selected "selected"}}" {{action "onTabSelect" 3}}>Search</li>
<li class="tab {{if tab4Selected "selected"}}" {{action "onTabSelect" 4}}>Network</li>
</ul>
{{#if showSections}}
<div class="content-linker-modal-container">
<p>Link to content within this document</p>
{{ui/ui-list-picker items=candidates.pages nameField="title" singleSelect=true onSelect=(action "setSelection")}}
</div>
{{/if}}
{{#if showAttachments}}
<div class="content-linker-modal-container">
<p>Link to an attachment within this document</p>
<div class="widget-list-picker">
<ul class="options">
{{#each candidates.attachments as |item|}}
<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}}>
<div class="text text-truncate">
<img class="icon" src="/assets/img/attachments/{{document/file-icon item.context}}">
{{item.title}}
</div>
{{#if item.selected}}
<i class="dicon {{constants.Icon.Tick}}" />
{{/if}}
</li>
{{/each}}
</ul>
</div>
</div>
{{/if}}
{{#if showSections}}
<div class="row">
<div class="col content-linker-modal-container">
<p>Link to content within this document</p>
{{ui/ui-list-picker items=candidates.pages nameField="title" singleSelect=true onSelect=(action "setSelection")}}
</div>
{{#if showSearch}}
<div class="content-linker-modal-container">
<div class="form-group">
<label>Search</label>
{{focus-input id="content-linker-search" type="input" class="form-control" value=keywords placeholder="keyword search" autocomplete="off"}}
<small class="form-text text-muted">Document name, content, attachment name</small>
</div>
{{/if}}
{{#if showAttachments}}
<div class="row">
<div class="col content-linker-modal-container">
<p>Link to an attachment within this document</p>
<div class="widget-list-picker">
<ul class="options">
{{#each candidates.attachments as |item|}}
<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}}>
<div class="text text-truncate">
<img class="icon" src="/assets/img/attachments/{{document/file-icon item.context}}">
{{item.title}}
</div>
{{#if item.selected}}
<i class="dicon {{constants.Icon.Tick}}" />
{{/if}}
</li>
{{/each}}
</ul>
</div>
</div>
{{#unless hasMatches}}
<p class="nothing">Nothing found.</p>
{{/unless}}
<div class="widget-list-picker">
<ul class="options">
{{#each matches.documents as |item|}}
<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}}>
<div class="text text-truncate">
{{item.title}}<br>{{item.context}}
</div>
{{#if item.selected}}
<i class="dicon {{constants.Icon.Tick}}" />
{{/if}}
</li>
{{/each}}
{{#each matches.pages as |item|}}
<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}}>
<div class="text text-truncate">
{{item.title}}<br>{{item.context}}
</div>
{{#if item.selected}}
<i class="dicon {{constants.Icon.Tick}}" />
{{/if}}
</li>
{{/each}}
{{#each matches.attachments as |item|}}
<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}}>
<div class="text text-truncate">
<img class="icon" src="/assets/img/attachments/{{document/file-icon item.context}}">
{{item.title}}
</div>
{{#if item.selected}}
<i class="dicon {{constants.Icon.Tick}}" />
{{/if}}
</li>
{{/each}}
</ul>
</div>
{{/if}}
</div>
{{/if}}
{{#if showSearch}}
<div class="row">
<div class="col content-linker-modal-container">
<div class="form-group">
<label>Search</label>
{{focus-input id="content-linker-search" type="input" class="form-control" value=keywords placeholder="keyword search" autocomplete="off"}}
<small class="form-text text-muted">Document name, content, attachment name</small>
</div>
{{#unless hasMatches}}
Nothing found.
{{/unless}}
<div class="widget-list-picker">
<ul class="options">
{{#each matches.documents as |item|}}
<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}}>
<div class="text text-truncate">
{{item.title}}<br>{{item.context}}
</div>
{{#if item.selected}}
<i class="dicon {{constants.Icon.Tick}}" />
{{/if}}
</li>
{{/each}}
{{#each matches.pages as |item|}}
<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}}>
<div class="text text-truncate">
{{item.title}}<br>{{item.context}}
</div>
{{#if item.selected}}
<i class="dicon {{constants.Icon.Tick}}" />
{{/if}}
</li>
{{/each}}
{{#each matches.attachments as |item|}}
<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}}>
<div class="text text-truncate">
<img class="icon" src="/assets/img/attachments/{{document/file-icon item.context}}">
{{item.title}}
</div>
{{#if item.selected}}
<i class="dicon {{constants.Icon.Tick}}" />
{{/if}}
</li>
{{/each}}
</ul>
</div>
</div>
{{#if showNetwork}}
<div class="content-linker-modal-container">
<p>Specify network drive/share/folder location</p>
<div class="form-group">
{{focus-input id="content-linker-networklocation" type="input" class="form-control" value=networkLocation placeholder="e.g. //share/folder" autocomplete="off"}}
<small class="form-text text-muted"></small>
</div>
{{/if}}
{{#if showNetwork}}
<div class="row">
<div class="col content-linker-modal-container">
<p>Specify network drive/share/folder location</p>
<div class="form-group">
{{focus-input id="content-linker-networklocation" type="input" class="form-control" value=networkLocation placeholder="e.g. //share/folder" autocomplete="off"}}
<small class="form-text text-muted"></small>
</div>
</div>
</div>
{{/if}}
</div>
</div>
{{/if}}
</div>
<div class="modal-footer">
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}

View file

@ -1,53 +1,40 @@
<div class="onboarding-container">
<div class="container">
<div class="row">
<div class="col col-sm-6">
<div class="sidebar">
<img class="logo img-responsive" src="/assets/img/logo-color.png">
<div class="stage-1">
<p>Let's set up your account</p>
<div class="form-group">
<label for="stage-1-firstname">Firstname</label>
<input id="stage-1-firstname" type="text" value="" class="form-control">
<small class="form-text text-muted">Nickname or otherwise</small>
</div>
<div class="form-group">
<label for="stage-1-lastname">Lastname</label>
<input id="stage-1-lastname" type="text" value="" class="form-control">
<small class="form-text text-muted">Usually not the same as your firstname</small>
</div>
{{ui/ui-spacer size=300}}
{{ui/ui-button id="stage-1-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.Next}}
</div>
<div class="stage-2">
<p>Let's set up your account</p>
<div class="form-group">
<label for="stage-2-password">Choose Password</label>
<input id="stage-2-password" type="password" value="" class="form-control">
<small class="form-text text-muted">Between 6 and 50 characters</small>
</div>
<div class="form-group">
<label for="stage-2-password-confirm">Confirm Password</label>
<input id="stage-2-password-confirm" type="password" value="" class="form-control">
<small class="form-text text-muted">Re-type your chosen password</small>
</div>
{{ui/ui-spacer size=300}}
{{ui/ui-button id="stage-2-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.SignIn}}
</div>
<div class="stage-3">
<p>Please wait...</p>
</div>
</div>
<div class="sidebar">
<img class="logo img-responsive" src="/assets/img/logo-color.png">
<div class="stage-1">
<p>Let's set up your account</p>
<div class="form-group">
<label for="stage-1-firstname">Firstname</label>
<input id="stage-1-firstname" type="text" value="" class="form-control">
<small class="form-text text-muted">Nickname or otherwise</small>
</div>
<div class="form-group">
<label for="stage-1-lastname">Lastname</label>
<input id="stage-1-lastname" type="text" value="" class="form-control">
<small class="form-text text-muted">Usually not the same as your firstname</small>
</div>
{{ui/ui-spacer size=300}}
{{ui/ui-button id="stage-1-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.Next}}
</div>
<div class="stage-2">
<p>Let's set up your account</p>
<div class="form-group">
<label for="stage-2-password">Choose Password</label>
<input id="stage-2-password" type="password" value="" class="form-control">
<small class="form-text text-muted">Between 6 and 50 characters</small>
</div>
</div>
</div>
<div class="form-group">
<label for="stage-2-password-confirm">Confirm Password</label>
<input id="stage-2-password-confirm" type="password" value="" class="form-control">
<small class="form-text text-muted">Re-type your chosen password</small>
</div>
{{ui/ui-spacer size=300}}
{{ui/ui-button id="stage-2-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.SignIn}}
</div>
<div class="stage-3">
<p>Please wait...</p>
</div>
</div>
</div>

View file

@ -1,47 +1,38 @@
{{#section/base-editor document=document folder=folder page=page busy=busy tip="GitHub is how people build software. (https://github.com)" isDirty=(action "isDirty") onCancel=(action "onCancel") onAction=(action "onAction")}}
<div class="row section-github-editor">
<div class="section-github-editor">
{{#if authenticated}}
<div class="col-6">
<div class="form-group">
<label>Select Organization</label>
{{ui/ui-select id="owners-dropdown" content=owners action=(action "onOwnerChange") optionValuePath="id" optionLabelPath="name" selection=config.owner}}
<small class="form-text text-muted">Select organization or user whose repository you want to show</small>
</div>
<div class="form-group">
<label>Show items since</label>
{{input id="branch-since" value=config.branchSince type="text" class="form-control"}}
<small class="form-text text-muted">default is 7 days ago</small>
</div>
<div class="form-group">
<label>GitHub Views</label>
<div class="github-view">
{{input id="show-milestone" checked=config.showMilestones type="checkbox"}}
<label>Show Milestones</label>
<br>
{{input id="show-issues" checked=config.showIssues type="checkbox"}}
<label>Show Issues</label>
<br>
{{input id="show-commits" checked=config.showCommits type="checkbox" }}
<label>Show Commits</label>
</div>
<small class="form-text text-muted">Select the views you want to show</small>
</div>
<div class="form-group">
<label>Select Organization</label>
{{ui/ui-select id="owners-dropdown" content=owners action=(action "onOwnerChange") optionValuePath="id" optionLabelPath="name" selection=config.owner}}
<small class="form-text text-muted">Select organization or user whose repository you want to show</small>
</div>
<div class="col-6">
<div class="input-form">
<div class="form-group">
<label>Select Repository</label>
{{ui/ui-list-picker items=config.lists nameField="repo" singleSelect=true}}
</div>
<div class="form-group">
<label>Show items since</label>
{{input id="branch-since" value=config.branchSince type="text" class="form-control"}}
<small class="form-text text-muted">default is 7 days ago</small>
</div>
<div class="form-group">
<label>GitHub Views</label>
<div class="github-view">
{{input id="show-milestone" checked=config.showMilestones type="checkbox"}}
<label>Show Milestones</label>
<br>
{{input id="show-issues" checked=config.showIssues type="checkbox"}}
<label>Show Issues</label>
<br>
{{input id="show-commits" checked=config.showCommits type="checkbox" }}
<label>Show Commits</label>
</div>
<small class="form-text text-muted">Select the views you want to show</small>
</div>
<div class="input-form">
<div class="form-group">
<label>Select Repository</label>
{{ui/ui-list-picker items=config.lists nameField="repo" singleSelect=true}}
</div>
</div>
{{else}}
<div class="col-6">
<div class="" {{action "auth"}}>Authenticate</div>
</div>
<div class="" {{action "auth"}}>Authenticate</div>
{{/if}}
</div>
{{/section/base-editor}}