xarvh/fipamo
1
0
Fork 0
forked from projects/fipamo
Code Pull requests Activity

accessibility audit, icons part 1

Browse source 
using a font for icons isn't great for site accessibility, so all font
icons will be removed and replaced with svgs.

nav and sub nav, page options and recent meta have been replaced
This commit is contained in:
ro 2024-03-20 15:13:50 -06:00
parent 252059df19
commit 8c727d4414
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
8 changed files with 54 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
public/assets/css/dash/frame.css
View file

@ -50,6 +50,7 @@ code {
}
svg[role="icon"] {
transition: all 0.3s linear;
fill: var(--white);
width: 25px;
height: 25px;
@ -123,9 +124,16 @@ header > nav > div.nav-right div.submenu button {
font-size: 0.8em;
}
header > nav > div.nav-right div.submenu button[data-render="true"] {
background: var(--tertiary);
color: var(--primary);
button[data-render="true"] {
background: var(--primary);
}
button[data-render="true"] svg {
fill: var(--highlight);
}
button[data-render="false"] svg {
fill: var(--white);
}
/* RESPONSIVE */

14
public/assets/css/dash/index.css
View file

@ -68,22 +68,22 @@ section[class="index-recent-pages"] button i {
font-size: 1.8em;
}
section[class="index-recent-pages"] button[data-active="true"] {
button[data-active="true"] {
background: var(--primary);
}
section[class="index-recent-pages"] button[data-active="true"] i {
color: var(--tertiary);
}
section[class="index-recent-pages"] button[data-active="false"] {
button[data-active="false"] {
background: var(--secondary);
}
section[class="index-recent-pages"] button[data-active="false"] i {
button[data-active="false"] svg {
fill: var(--primary);
}
button[data-active="true"] svg {
fill: var(--highlight);
}
section[class="index-recent-pages"] aside {
font-size: 1.1em;
color: var(--white);

29
public/assets/css/dash/page-editor.css
View file

@ -230,35 +230,6 @@ main
border-radius: 0 3px 3px 0;
}
main section[role="page-meta"] div[role="page-meta-wrapper"] button[data-active="false"] {
background: var(--primary);
}
main
section[role="page-meta"]
div[role="page-meta-wrapper"]
button[data-active="false"]
svg {
fill: var(--secondary);
}
main
section[role="page-meta"]
div[role="page-meta-wrapper"]
div[role="page-options"]
button[data-active="true"] {
background: var(--tertiary);
}
main
section[role="page-meta"]
div[role="page-meta-wrapper"]
div[role="page-options"]
button[data-active="true"]
svg {
fill: var(--primary);
}
main
section[role="page-meta"]
div[role="page-meta-wrapper"]

12
resources/views/includes/nav.blade.php
View file

@ -6,17 +6,23 @@
@endif
<a id="settings" href="/dashboard/settings" title="settings">
<button>
<i class="ti ti-home-cog"></i>
<svg id="nav-settings-icon" role="icon">
<use id="nav-settings-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cog"/>
</svg>
</button>
</a>
<a id="navigation" href="/dashboard/navigation" title="edit navigation">
<button>
<i class="ti ti-arrow-autofit-height"></i>
<svg id="nav-menu-icon" role="icon">
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/>
</svg>
</button>
</a>
<a id="navigation" href="/dashboard/logout" title="log out">
<button>
<i class="ti ti-logout"></i>
<svg id="nav-logout-icon" role="icon">
<use id="nav-logout-icon" xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/>
</svg>
</button>
</a>
</div>

4
resources/views/includes/options.blade.php
View file

@ -33,8 +33,8 @@ if(isset($page['uuid']))
<br>
<button id="option-menu-pin" class="option-inactive post-option-btn" data-active="{{ $menu }}" title='Pin to Menu'>
<svg id="option-page-icon" role="icon">
<use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
<svg id="option-menu-pin" role="icon">
<use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-pin"/>
</svg>
</button><button id="option-feature" class="option-inactive post-option-btn" data-active="{{ $featured }}" title='Feature'>
<svg id="option-feature-icon" role="icon">

12
resources/views/includes/recent-meta.blade.php
View file

@ -33,14 +33,20 @@ if($page['featured'] == 'true')
</strong>
<hr/>
<button data-active="{{ $menu }}">
<i class="ti ti-navigation"></i>
<svg id="option-menu-pin" role="icon">
<use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-pin"/>
</svg>
</button>
<button data-active="{{ $published }}">
<i class="ti ti-world"></i>
<svg id="option-published-icon" role="icon">
<use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
</svg>
</button>
<button data-active="{{ $featured }}">
<i class="ti ti-star"></i>
<svg id="option-feature-icon" role="icon">
<use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
</svg>
</button>
</aside>

12
resources/views/includes/submenu-settings.blade.php
View file

@ -1,11 +1,17 @@
<div class="submenu">
<button id="save-toggle" title="save settings">
<i class="ti ti-device-floppy"></i>
<svg id="save-toggle" role="icon">
<use id="save-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-save"/>
</svg>
</button>
<button id="publish-pages" title="publish site">
<i class="ti ti-world-upload"></i>
<svg id="publish-pages" role="icon">
<use id="publish-pages" xlink:href="/assets/images/global/sprite.svg#entypo-publish"/>
</svg>
</button>
<button id="render-toggle" title="render on save toggle" data-render="{{ $renderOnSave }}">
<i class="ti ti-circle-dashed"></i>
<svg id="render-toggle" role="icon">
<use id="render-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-ccw"/>
</svg>
</button>
</div>

8
resources/views/includes/submenu-start.blade.php
View file

@ -1,12 +1,16 @@
<div class="submenu">
<a href='/dashboard/pages' title="view pages">
<button>
<i class="ti ti-book-2"></i>
<svg id="option-menu-pin" role="icon">
<use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-book"/>
</svg>
</button>
</a>
<a href='/dashboard/page/add/new' title="add new page">
<button>
<i class="ti ti-square-plus"></i>
<svg id="option-menu-pin" role="icon">
<use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-squared-plus"/>
</svg>
</button>
</a>
</div>