Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Preparing new HTML structure #461

Closed
wants to merge 24 commits into from
Closed

Preparing new HTML structure #461

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
eb70b12
CSS rebuild: main variables, common elements & helpers, bases for inp…
jbidoret Oct 22, 2024
3cf3a16
Preparing new HTML structure: top bar
jbidoret Oct 22, 2024
5db7423
Preparing new HTML structure: home nav bar (dropdowns)
jbidoret Oct 22, 2024
563efb9
Preparing new HTML structure: media nav bar (dropdowns)
jbidoret Oct 22, 2024
be031c4
Preparing new HTML structure: layout cleanup
jbidoret Oct 22, 2024
92dd1f6
Backtopbar: restructuring HTML (removing spans)
jbidoret Oct 22, 2024
ed08157
Backtopbar: restructuring HTML (reindent)
jbidoret Oct 22, 2024
4265c1e
CSS: Horizontal bars (common) + #topbar (specific)
jbidoret Oct 22, 2024
36e949c
Navbars (dropdown menus): added class dropdown
jbidoret Oct 22, 2024
6772f4d
Navbars (dropdown menus): added wrapper around dropdown-content
jbidoret Oct 22, 2024
1c57e37
Navbars (dropdown menus): removed .submenu wrapper(replacede by .drop…
jbidoret Oct 22, 2024
0e34d9c
CSS: add dropdowns
jbidoret Oct 22, 2024
8c64abd
Navbars (dropdown menus): wrap each dropdown section in a .dropdown-s…
jbidoret Oct 22, 2024
19cb3be
Navbars (dropdown menus): removed br
jbidoret Oct 22, 2024
91c4b34
CSS: add .button styles within .submit-field
jbidoret Oct 22, 2024
04e7859
Navbars (dropdown menus): replace strong by h3
jbidoret Oct 22, 2024
7931cf7
Navbars (dropdown menus): wrapping of each input in a p.field, labels…
jbidoret Oct 22, 2024
4bc81fe
JS: closeSubmenus function updated to accommodate change in dropdowns…
jbidoret Oct 22, 2024
8e3a65d
CSS: removed percentage padding from p
jbidoret Oct 22, 2024
5289e4a
CSS: navbar background-color
jbidoret Oct 22, 2024
04dda98
CSS: help buttons in dropdowns
jbidoret Oct 22, 2024
7acf421
CSS: help buttons style
jbidoret Oct 22, 2024
781d569
UI guidelines added (wip)
jbidoret Oct 22, 2024
127c560
Default theme that almost match current state of UI design
jbidoret Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion app/view/templates/backtopbar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<header id="topbar">
<header class="hbar" id="topbar">

<div class="hbar-section">
<div class="flexrow">

<span id="search">
<form action="<?= $this->url('search') ?>" method="post">
Expand Down Expand Up @@ -33,7 +36,11 @@
</span>

<?php endif ?>
</div>
</div>

<div id="user" class="hbar-section">
<div class="flexrow">

<span id="user">

Expand Down Expand Up @@ -79,5 +86,8 @@


</span>
</div>

</div>

</header>
6 changes: 4 additions & 2 deletions app/view/templates/homemenu.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<aside class="home">
<nav id="navbar" class="hbar">

<div class="hbar-section">

<?php if($user->issupereditor()) : ?>
<details id="json">
Expand Down Expand Up @@ -467,4 +468,5 @@
</form>
</span>

</aside>
</div>
</nav>
54 changes: 25 additions & 29 deletions app/view/templates/layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width" />

<title><?= $title ?></title>

<?php if (!empty($favicon)) : ?>
<link rel="shortcut icon" href="<?= Wcms\Model::faviconpath() . $favicon ?>" type="image/x-icon">
<?php elseif (!empty(Wcms\Config::defaultfavicon())) : ?>
<link rel="shortcut icon" href="<?= Wcms\Model::faviconpath() . Wcms\Config::defaultfavicon() ?>" type="image/x-icon">
<?php endif ?>
<title><?= $title ?></title>

<link rel="stylesheet" href="<?= Wcms\Model::assetscsspath() ?>base.css">
<link rel="stylesheet" href="<?= Wcms\Model::assetscsspath() ?>fork-awesome.css">
Expand All @@ -23,37 +25,31 @@
<?php endif ?>

<?php if (isreportingerrors()) : ?>
<script>
const sentrydsn = '<?= Wcms\Config::sentrydsn() ?>';
const version = '<?= getversion() ?>';
const url = '<?= Wcms\Config::url() ?>';
const basepath = '<?= Wcms\Config::basepath() ?>';
</script>
<script type="module" src="<?= Wcms\Model::jspath() ?>sentry.bundle.js"></script>
<script>
const sentrydsn = '<?= Wcms\Config::sentrydsn() ?>';
const version = '<?= getversion() ?>';
const url = '<?= Wcms\Config::url() ?>';
const basepath = '<?= Wcms\Config::basepath() ?>';
</script>
<script type="module" src="<?= Wcms\Model::jspath() ?>sentry.bundle.js"></script>
<?php endif ?>
</head>



<?php
if (!empty($flashmessages) && is_array($flashmessages)) : ?>
<a href="#flashmessage">
<div class="flashmessage" id="flashmessage">
<ul>
<?php foreach ($flashmessages as $flashmessage ) : ?>
<li class="alert alert-<?= $flashmessage['type'] ?>">
<?= $flashmessage['content'] ?>
</li>
<?php endforeach ?>
</ul>
</div>
</a>
<?php endif ?>

<body>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh! interesting, I totally forgot that I've put flash messages out of body. Seems better like this !

<?= $this->section('page') ?>
</body>

<?php if (!empty($flashmessages) && is_array($flashmessages)) : ?>
<a href="#flashmessage">
<div class="flashmessage" id="flashmessage">
<ul>
<?php foreach ($flashmessages as $flashmessage ) : ?>
<li class="alert alert-<?= $flashmessage['type'] ?>">
<?= $flashmessage['content'] ?>
</li>
<?php endforeach ?>
</ul>
</div>
</a>
<?php endif ?>

<?= $this->section('page') ?>

</body>
</html>
7 changes: 5 additions & 2 deletions app/view/templates/mediamenu.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<aside class="media">
<nav id="navbar" class="hbar">

<div class="hbar-section">

<details>
<summary>File</summary>
Expand Down Expand Up @@ -127,5 +129,6 @@
</details>


</div>

</aside>
</nav>
147 changes: 119 additions & 28 deletions assets/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
:root {
--spacing: 1rem; /* better when non zero */
--padding: .5rem; /* can be zero to remind old style w look */
--radius: .25rem; /* border-radius on buttons and inputs */
--size-small: .85em; /* small sizes */
/* padding adjustments : */
--reset-padding: calc(var(--padding) * -1);
--half-padding: calc(var(--padding) / 2);
--double-padding: calc(var(--padding) * 2);
--gap: 1px; /* 1px for separated columns & panels, 0 for collapsed ones */
--font-family: sans-serif;
}

* {
box-sizing: border-box;
scrollbar-color: var(--main-color) transparent;
Expand All @@ -16,48 +29,137 @@ body {
margin: 0;
height: 100%;
background-color: var(--tertiary-background-color);
font-family: sans-serif;
font-family: var(--font-family);
font-size: 15px;
position: fixed;
display: flex;
flex-direction: column;
width: 100%;
color: var(--text-color);
gap: var(--gap, 0);
user-select: none;
}

/* --------------------------------------------------------- common elements */

h1, h2 {
margin: 0;
color: var(--text2-color);
background-color: var(--main-color);
}

p, code {
user-select: text;
}

code.select-all {
user-select: all;
}

a {
text-decoration: none;
color: currentColor;
}


/* --------------------------------------------------------- layout helpers */

.flexrow {
display: flex;
flex-direction: row;
gap: var(--spacing);
}
.flexrow-reverse {
flex-direction: row-reverse;
}
.flexrow > * {
flex: 1 auto;
align-items: center;
justify-content: center;
gap: var(--padding);
display: flex;
}
.flexcol {
display: flex;
flex-direction: column;
gap: var(--spacing);
}

input, textarea, button, select, .field {

/* --------------------------------------------------------- inputs and buttons */

input, textarea, button, select, .button {
font: inherit;
border: none;
accent-color: var(--main-color);
font-size: var(--size-small);
padding: var(--half-padding) var(--padding);
border-radius: var(--radius);
}

input, textarea, .field {
color: var(--input-color)!important;
input, textarea {
color: var(--input-color);
border-color: var(--input-color);
background-color: var(--input-background-color);
}

input[type="submit"], button, select {
color: var(--button-color)!important;
input[type="submit"], input[type="file"], button, select, .button {
color: var(--button-color);
border-color: var(--button-color);
background-color: var(--button-background-color);
cursor: pointer;
}

h1, h2 {
color: var(--text2-color);
background-color: var(--main-color);

/* --------------------------------------------------------- fields */

.field {
margin: 0;
display: flex;
flex-direction: column;
align-items: start;
gap: 0;
}
.field label {
display: block;
font-size: var(--size-small);
padding-bottom: var(--half-padding);
}

a, button, input, select, textarea, .field {
text-decoration: none;
.field label + input[type="text"],
.field label + input[type="number"],
.field label + input[type="color"],
.field label + select { width: 100%; }

.field:has([type="checkbox"]),
.field:has([type="radio"]),
.field:has([type="color"]) {
flex-direction: row-reverse;
align-items: start;
gap: var(--padding);
}
.field:has([type="checkbox"]) label,
.field:has([type="radio"]) label,
.field:has([type="color"]) label {
flex: 1;
}
.field:has([type="color"]) input {
flex: 1;
padding: 0;
}

.submit-field {
flex-direction: row;
justify-content: end;
align-items: end;
}
.submit-field [type=submit], .submit-field button {
background: var(--outline-background-color);
color: var(--text2-color);
font-weight: bold;
}



h1, h2 {
margin: 0;
font-size: larger;
}
/* --------------------------------------------------------- almost untouched… */

#topbar {
background-color: var(--main-color);
Expand Down Expand Up @@ -136,17 +238,6 @@ label.toogle {
}


body {
user-select: none;
}

p, code {
user-select: text;
}

code.select-all {
user-select: all;
}


@media (max-width: 750px) {
Expand Down