mirror_php/formwork
1
0
Fork 0
mirror of https://github.com/getformwork/formwork.git synced 2025-01-17 21:49:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Tweak panel UI

Browse Source
This commit is contained in:
Giuseppe Criscione 2024-05-11 20:19:35 +02:00
parent 0bbb3ad6e2
commit 024448f1af
15 changed files with 49 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
panel/assets/css/panel-dark.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
panel/assets/css/panel.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
panel/assets/js/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

15
panel/src/scss/components/_buttons.scss
View File

@ -55,7 +55,8 @@
color: $color-white;
&:hover,
&:focus {
&:focus,
&.active {
border-color: $color-accent-400;
background-color: $color-accent-400;
color: $color-white;
@ -73,7 +74,8 @@
color: $color-base-100;
&:hover,
&:focus {
&:focus,
&.active {
border-color: $color-base-500;
background-color: $color-base-500;
color: $color-base-100;
@ -91,7 +93,8 @@
color: $color-white;
&:hover,
&:focus {
&:focus,
&.active {
border-color: $color-success-400;
background-color: $color-success-400;
color: $color-white;
@ -109,7 +112,8 @@
color: $color-white;
&:hover,
&:focus {
&:focus,
&.active {
border-color: $color-warning-400;
background-color: $color-warning-400;
color: $color-white;
@ -127,7 +131,8 @@
color: $color-white;
&:hover,
&:focus {
&:focus,
&.active {
border-color: $color-danger-400;
background-color: $color-danger-400;
color: $color-white;

2
panel/src/scss/components/_colors.scss
View File

@ -1,6 +1,6 @@
$color-white: #fff;
$color-black: #000;
$color-blue: #1e88e5;
$color-blue: #1d86e1;
$color-green: #2ecc70;
$color-yellow: #ffd700;
$color-amber: #f39c11;

15
panel/src/scss/components/_columns.scss
View File

@ -2,27 +2,24 @@
.container {
max-width: map.get($breakpoints, "lg");
padding: 0 $columns-gutter * 0.5;
padding: 0;
margin: 0 auto;
}
.row {
display: flex;
flex-wrap: wrap;
margin: 0 $columns-gutter * -0.5;
margin: 0;
}
@media (max-width: map.get($breakpoints, "sm")) {
@media (min-width: map.get($breakpoints, "sm")) {
.container {
padding: 0;
padding: 0 $columns-gutter;
}
.container .row {
margin: 0;
}
.container [class^="col-"] {
padding: 0;
margin-right: $columns-gutter * -0.5;
margin-left: $columns-gutter * -0.5;
}
}

13
panel/src/scss/components/_header.scss
View File

@ -5,15 +5,22 @@
z-index: 9;
top: 3.5rem;
display: flex;
min-height: 5.5rem;
min-height: 4.5rem;
align-items: center;
padding: 1rem;
padding: 0.5rem 1rem;
border-bottom: 1px solid $color-base-600;
margin-bottom: 1rem;
background-color: $color-base-800;
white-space: nowrap;
@media (min-width: map.get($breakpoints, "sm")) {
padding: 1rem 1.5rem;
padding: 0.5rem 1.5rem;
margin-right: -1rem;
margin-left: -1rem;
}
@media (min-width: map.get($breakpoints, "md")) {
min-height: 5.5rem;
margin-right: -1.5rem;
margin-bottom: 1.75rem;
margin-left: -1.5rem;

2
panel/src/scss/components/_logo.scss
View File

@ -7,7 +7,7 @@
font-weight: 600;
line-height: 1.5rem;
text-align: center;
@media (min-width: map.get($breakpoints, "sm")) {
@media (min-width: map.get($breakpoints, "md")) {
text-align: left;
}
}

5
panel/src/scss/components/_mixins.scss
View File

@ -74,7 +74,10 @@
}
#{$selectors} {
width: 100%;
padding: 0 $columns-gutter * 0.5;
@media (min-width: map.get($breakpoints, "sm")) {
padding: 0 $columns-gutter * 0.5;
}
}
}

4
panel/src/scss/components/_panel.scss
View File

@ -15,7 +15,7 @@
color: $color-base-100;
font-weight: 500;
@include user-select-none;
@media (min-width: map.get($breakpoints, "sm")) {
@media (min-width: map.get($breakpoints, "md")) {
left: 16rem;
padding-left: 1.5rem;
}
@ -57,7 +57,7 @@
.panel-main {
padding-top: 4rem;
@media (min-width: map.get($breakpoints, "sm")) {
@media (min-width: map.get($breakpoints, "md")) {
padding: 1.875rem;
padding-top: 4rem;
padding-left: 1.875rem + 16rem;

6
panel/src/scss/components/_tabs.scss
View File

@ -29,7 +29,11 @@
margin-top: -0.5rem;
}
@media (min-width: map.get($breakpoints, "sm")) {
.header + .tabs {
margin-top: -0.5rem;
}
@media (min-width: map.get($breakpoints, "md")) {
.header + .tabs {
margin-top: -1.5rem;
}

2
panel/src/scss/components/_variables.scss
View File

@ -96,7 +96,7 @@ $spacers: (
);
$columns-count: 12;
$columns-gutter: 30px;
$columns-gutter: 1rem;
$border-radius: 4px;
$border-radius-round: 50%;

2
panel/src/ts/components/navigation.ts
View File

@ -7,7 +7,7 @@ export class Navigation {
if (($(".sidebar") as HTMLElement).classList.toggle("show")) {
if (!$(".sidebar-backdrop")) {
const backdrop = document.createElement("div");
backdrop.className = "sidebar-backdrop hide-from-sm";
backdrop.className = "sidebar-backdrop hide-from-md";
document.body.appendChild(backdrop);
}
} else {

4
panel/views/pages/tree.php
View File

@ -1,7 +1,7 @@
<?php if ($headers) : ?>
<div class="pages-tree-headers" aria-hidden="true">
<div class="pages-tree-headers-cell page-details truncate"><?= $this->translate('panel.pages.page.title') ?></div>
<div class="pages-tree-headers-cell page-date truncate show-from-md"><?= $this->translate('panel.pages.page.lastModified') ?></div>
<div class="pages-tree-headers-cell page-date truncate show-from-lg"><?= $this->translate('panel.pages.page.lastModified') ?></div>
<div class="pages-tree-headers-cell page-status truncate show-from-xs"><?= $this->translate('panel.pages.page.status') ?></div>
<div class="pages-tree-headers-cell page-actions"><?= $this->translate('panel.pages.page.actions') ?></div>
</div>
@ -46,7 +46,7 @@
</div>
</div>
</div>
<div class="pages-tree-item-cell page-date truncate show-from-md"><?= $date ?></div>
<div class="pages-tree-item-cell page-date truncate show-from-lg"><?= $date ?></div>
<div class="pages-tree-item-cell page-status truncate show-from-xs">
<?= $this->insert('_pages/status', ['page' => $page]) ?>
<span class="page-status-label"><?= $this->translate('panel.pages.status.' . $page->status()) ?></span>

6
panel/views/partials/sidebar.php
View File

@ -1,6 +1,6 @@
<button type="button" class="button button-link sidebar-toggle hide-from-sm" aria-label="<?= $this->translate('panel.navigation.toggle') ?>"><?= $this->icon('bars') ?></button>
<div class="sidebar show-from-sm">
<div class="logo"><a href="<?= $panel->uri('/dashboard/') ?>"><img src="<?= $this->assets()->uri('images/icon.svg') ?>" alt=""> Formwork</a> <span class="show-from-sm text-color-gray-medium text-size-xs"><?= $app::VERSION ?></span></div>
<button type="button" class="button button-link sidebar-toggle hide-from-md" aria-label="<?= $this->translate('panel.navigation.toggle') ?>"><?= $this->icon('bars') ?></button>
<div class="sidebar show-from-md">
<div class="logo"><a href="<?= $panel->uri('/dashboard/') ?>"><img src="<?= $this->assets()->uri('images/icon.svg') ?>" alt=""> Formwork</a> <span class="show-from-md text-color-gray-medium text-size-xs"><?= $app::VERSION ?></span></div>
<a href="<?= $panel->uri('/users/' . $panel->user()->username() . '/profile/') ?>">
<div class="panel-user-card">
<div class="panel-user-avatar">