Layout draft for folder browser
parent
1c0081c990
commit
7a97fba95b
|
|
@ -18,7 +18,114 @@
|
|||
<div class="container-fluid">
|
||||
<h1>#{CmsAdminMessages.getMessage("folderbrowser.heading", [ContentSectionModel.sectionName])}</h1>
|
||||
|
||||
<p>placeholder</p>
|
||||
<div class="row">
|
||||
<nav class="col-sm-3 folderbrowser">
|
||||
<ul class="nav flex-column border">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Folder 1</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex">
|
||||
<button class="btn btn-light pr-0 subfolders-toggler"
|
||||
data-toggle="collapse"
|
||||
data-target="#folder-2-subfolders"
|
||||
aria-expanded="false"
|
||||
aria-controls="folder-2-subfolders"
|
||||
type="button">
|
||||
<!--<bootstrap:svgIcon icon="caret-right-fill" />-->
|
||||
<span class="sr-only">
|
||||
#{CmsAdminMessages['contentsection.folderbrowser.foldersnav.subfolders.expand']}
|
||||
</span>
|
||||
</button>
|
||||
<a class="nav-link pl-0" href="#">Folder 2</a>
|
||||
</div>
|
||||
<ul class="nav flex-column collapse"
|
||||
id="folder-2-subfolders">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Folder 2-1</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Folder 2-2</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Folder 2-3</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Folder 3</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Folder 4</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Folder 5</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<table class="col-sm-9 table table-hover folderbrowser">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th>
|
||||
#{CmsAdminMessages['contentsection.folderbrowser.headers.name.label']}
|
||||
</th>
|
||||
<th>
|
||||
#{CmsAdminMessages['contentsection.folderbrowser.headers.languages.label']}
|
||||
</th>
|
||||
<th>
|
||||
#{CmsAdminMessages['contentsection.folderbrowser.headers.title.label']}
|
||||
</th>
|
||||
<th>
|
||||
#{CmsAdminMessages['contentsection.folderbrowser.headers.type.label']}
|
||||
</th>
|
||||
<th>
|
||||
#{CmsAdminMessages['contentsection.folderbrowser.headers.creationdate.label']}
|
||||
</th>
|
||||
<th>
|
||||
#{CmsAdminMessages['contentsection.folderbrowser.headers.lastedit.label']}
|
||||
</th>
|
||||
<th>
|
||||
#{CmsAdminMessages['contentsection.folderbrowser.headers.actions.label']}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#">folder-1</a></td>
|
||||
<td></td>
|
||||
<td>Folder 1</td>
|
||||
<td>Ordner</td>
|
||||
<td>2021-01-20 08:59</td>
|
||||
<td>2021-01-20 08:59</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">an-item</a></td>
|
||||
<td>de, en</td>
|
||||
<td>An item</td>
|
||||
<td>Article</td>
|
||||
<td>2021-01-20 09:03</td>
|
||||
<td>2021-01-20 10:11 (#{CmsAdminMessages['contentsection.folderbrowser.cols.lastedit.published']})</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">unpublished-item</a></td>
|
||||
<td>de, en</td>
|
||||
<td>Unppublished item item</td>
|
||||
<td>Article</td>
|
||||
<td>2021-01-20 10:31</td>
|
||||
<td>2021-01-20 10:34 (#{CmsAdminMessages['contentsection.folderbrowser.cols.lastedit.unpublished']})</td>
|
||||
<td>
|
||||
<button class="btn btn-danger"
|
||||
type="button">
|
||||
<bootstrap:svgIcon icon="x-circle" />
|
||||
<span>#{CmsAdminMessages['contentsection.folderbrowser.actions.delete.button.label']}</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
|
|
|
|||
|
|
@ -26,3 +26,14 @@ contentsections.edit_dialog.save=Rename content section
|
|||
contentsections.edit_dialog.name.help=The name of the content section. Can only contain the letters a to z, the numbers 0-9, the hyphen and the underscore.
|
||||
folderbrowser.title=Folder Browser
|
||||
folderbrowser.heading=Content Section {0} Folderbrowser
|
||||
contentsection.folderbrowser.headers.name.label=Name
|
||||
contentsection.folderbrowser.headers.languages.label=Languages
|
||||
contentsection.folderbrowser.headers.title.label=Title
|
||||
contentsection.folderbrowser.headers.type.label=Type
|
||||
contentsection.folderbrowser.headers.creationdate.label=Created
|
||||
contentsection.folderbrowser.headers.lastedit.label=Last edit
|
||||
contentsection.folderbrowser.headers.actions.label=Aktionen
|
||||
contentsection.folderbrowser.cols.lastedit.published=Published
|
||||
contentsection.folderbrowser.cols.lastedit.unpublished=Not published yet
|
||||
contentsection.folderbrowser.actions.delete.button.label=Delete
|
||||
contentsection.folderbrowser.foldersnav.subfolders.expand=Show subfolders of
|
||||
|
|
|
|||
|
|
@ -26,3 +26,14 @@ contentsections.edit_dialog.save=Content Section umbenennen
|
|||
contentsections.edit_dialog.name.help=Der Name der Content Section. Darf nur die Zeichen a bis z, 0-9, the Bindestrich und den Unterstrich enthalten.
|
||||
folderbrowser.title=Ordner
|
||||
folderbrowser.heading=Content Section {0} Ordner
|
||||
contentsection.folderbrowser.headers.name.label=Name
|
||||
contentsection.folderbrowser.headers.languages.label=Sprachen
|
||||
contentsection.folderbrowser.headers.title.label=Titel
|
||||
contentsection.folderbrowser.headers.type.label=Typ
|
||||
contentsection.folderbrowser.headers.creationdate.label=Erstellt
|
||||
contentsection.folderbrowser.headers.lastedit.label=Letzte \u00c4nderung
|
||||
contentsection.folderbrowser.headers.actions.label=Aktionen
|
||||
contentsection.folderbrowser.cols.lastedit.published=Publiziert
|
||||
contentsection.folderbrowser.cols.lastedit.unpublished=Nicht nicht publiziert
|
||||
contentsection.folderbrowser.actions.delete.button.label=L\u00f6schen
|
||||
contentsection.folderbrowser.foldersnav.subfolders.expand=Unterordner anzeigen
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 36rem,
|
||||
md: 48rem,
|
||||
lg: 62rem,
|
||||
xl: 75rem
|
||||
xs: 0,
|
||||
sm: 36rem,
|
||||
md: 48rem,
|
||||
lg: 62rem,
|
||||
xl: 75rem
|
||||
);
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 33.75rem,
|
||||
md: 45rem,
|
||||
lg: 60rem,
|
||||
xl: 71.25rem
|
||||
sm: 33.75rem,
|
||||
md: 45rem,
|
||||
lg: 60rem,
|
||||
xl: 71.25rem
|
||||
);
|
||||
|
||||
$grid-gutter-width: 1.875rem;
|
||||
|
|
@ -38,6 +38,37 @@ $pre-scrollable-max-height: 21.25rem;
|
|||
// Navbar default colors have insufficient contrast
|
||||
$navbar-dark-color: #fff;
|
||||
|
||||
nav.folderbrowser {
|
||||
& > ul.nav {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
|
||||
ul.nav {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
button.subfolders-toggler[aria-expanded="false"]::before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z' clip-rule='evenodd'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1em 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
button.subfolders-toggler[aria-expanded="true"]::before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z' clip-rule='evenodd'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1em 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
table.contentsections-table {
|
||||
tbody {
|
||||
td.action-col {
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
import "bootstrap";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue