Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updating styles to use the new Aether presets based on the TW and Skeleton presets. Prep for LCI

Browse Source
This commit is contained in:
Scott Idem
2025-06-19 20:25:09 -04:00
parent 09dc471842
commit e18400d597
4 changed files with 262 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
src/app.css
View File

@@ -167,6 +167,249 @@ html.trusted_access #appShell {
/* --theme-font-family-heading: 'Liberation Sans', sans-serif; */
/* } */
/* Using Skeleton Tailwind Presets */
/* Built in colors (also with "contrast" option):
* - primary
* - secondary
* - tertiary
* - success
* - warning
* - error
* - surface
*/
/* Built in presets:
* - Filled - a filled preset of the primary brand color.
* - Tonal - a tonal preset of the primary brand color.
* - Outlined - an outlined preset of the primary brand color.
*/
/* Additional customized presets:
* - Glass - a custom preset using background transparency and backdrop blur.
* - Elevated - mixes a filled preset with a shadow.
* - Ghost - has no style by default, but shows a tonal preset on hover.
* - Ghost Icon - has no style by default, but shows a branded tonal preset on hover.
* - Gradient - a custom preset generated using Tailwind gradient primitives.
*/
/* Generic button types needed:
* - primary
* - secondary
* - tertiary
* - success
* - warning
* - error
* - neutral
* - surface
* - info
* - danger
* - normal
* - outline
* - text
*/
/* Aether specific button types needed:
* - open or view
* - close or hide
* - help
* - save
* - delete
* - cancel
* - confirm
* - reset
* - submit
* - next or previous
* - back
* - edit
* - create
* - add
* - remove
* - copy
* - paste
* - download
* - upload
* - print
* - share
* - search
* - filter
* - sort
* - select
* - clear
* - toggle or switch
* - expand or collapse
* - configure or settings
* - refresh or reload
* - sync or synchronize
* - play or pause
* - stop
* - like or dislike
* - favorite or unfavorite
* - follow or unfollow
* - subscribe or unsubscribe
* - vote or unvote
* - rate or review
* - report or flag
* - block or unblock
* - accept or decline
* - agree or disagree
* - confirm or cancel
* - approve or reject
*/
/* Create a custom preset in your global stylesheet */
/* .preset-gradient {
background-image: linear-gradient(-45deg, var(--color-primary-300), var(--color-primary-700));
color: var(--color-primary-contrast-500);
} */
/* .preset-glass-primary {
background: color-mix(in oklab, var(--color-primary-500) 40%, transparent);
box-shadow: 0 0px 30px color-mix(in oklab, var(--color-primary-500) 50%, transparent) inset;
backdrop-filter: blur(16px);
} */
/* Buttons default to the tonal presets */
/* Buttons based on Skeleton Tailwind preset classes */
.ae_btn_primary {
@apply preset-tonal-primary border border-primary-500 transition-all;
}
.ae_btn_secondary {
@apply preset-tonal-secondary border border-secondary-500 transition-all;
/* hover:preset-filled-secondary-500 */
}
.ae_btn_tertiary {
@apply preset-tonal-tertiary border border-tertiary-500 transition-all;
}
.ae_btn_success {
@apply preset-tonal-success border border-success-500 transition-all;
}
.ae_btn_warning {
@apply preset-tonal-warning border border-warning-500 transition-all;
}
.ae_btn_error {
@apply preset-tonal-error border border-error-500 transition-all;
}
.ae_btn_surface {
@apply preset-tonal-surface border border-surface-500 transition-all;
}
/* Buttons customized for Aether using Skeleton Tailwind preset classes */
.ae_btn_info {
@apply border text-cyan-950 dark:text-cyan-50 bg-cyan-50 dark:bg-cyan-950 border-cyan-500 transition-all;
}
/* Buttons are for filled and outlined presets */
.ae_btn_secondary_filled {
@apply preset-filled-secondary-200-800 border border-secondary-500 transition-all;
/* hover:preset-filled-secondary-500 */
}
.ae_btn_secondary_outlined {
@apply preset-outlined-secondary-200-800 hover:preset-filled-secondary-200-800 border border-secondary-500 transition-all;
/* hover:preset-outlined-secondary-500 */
}
/* Containers customized for Aether using Skeleton Tailwind preset classes */
.ae_container_system_menu {
@apply container;
}
.ae_container_system_options {
@apply container;
}
.ae_container_system_help {
@apply container;
}
.ae_container_module {
@apply container;
/* @apply container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8; */
}
/* .ae_container_module_main {
@apply container;
} */
.ae_container_module_header {
/* LCI request 3a5997 */
/* bg-gray-300 */
@apply h2 text-center preset-tonal-primary rounded-md flex flex-row gap-0.25 items-center justify-between w-full p-1 px-2;
}
.ae_container_module_content {
@apply container;
}
.ae_container_module_menu {
@apply container;
}
.ae_container_module_options {
@apply container;
}
.ae_container_actions {
@apply container preset-tonal-success border border-success-500 rounded-md flex flex-row items-center my-2 p-2;
}
.ae_container_results {
@apply container;
}
.ae_container_content {
@apply container;
}
.ae_container_content_header {
@apply container;
}
.ae_container_content_content {
@apply container;
}
.ae_container_content_footer {
@apply container;
}
.ae_container_alert {
@apply container;
}
.ae_container_help {
@apply container;
}
.ae_container_info {
@apply container;
}
.ae_container_msg {
@apply container;
}
.ae_container_warning {
@apply container;
}
.ae_container_tag {
@apply container;
}
.ae_container_modal {
@apply container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
}
.ae_container_modal_header {
@apply container;
}
.ae_container_modal_content {
@apply container;
}
.ae_container_modal_footer {
@apply container;
}
/* Standard Aether object properties:
* - id
* - name
* - enable
* - hide
* - priority
* - sort
* - group
* - notes
*/
.card-footer {
border-top: 1px solid hsla(0, 0%, 0%, 0.5);
margin-top: 1em;

14
src/routes/events/[event_id]/+page.svelte
View File

@@ -421,7 +421,7 @@ max-w-max -->
{:else if $lq__event_obj?.enable || $ae_loc.trusted_access}
<!-- <header> -->
<h2 class="h2 text-center rounded-md p-1 px-2 bg-gray-300 flex flex-row gap-0.25 items-center justify-between w-full">
<h2 class="ae_container_module_header">
<span
class="flex flex-row gap-1 items-center"
>
@@ -436,7 +436,7 @@ max-w-max -->
$events_loc.pres_mgmt.show_content__event_view = 'manage_files';
}
}}
class="btn btn-md hover:preset-filled-secondary-500"
class="btn ae_btn_secondary"
class:preset-filled-secondary-500={$events_loc.pres_mgmt.show_content__event_view == 'manage_files'}
class:preset-filled-tertiary-500={$events_loc.pres_mgmt.show_content__event_view != 'manage_files'}
class:hidden={!$ae_loc.administrator_access}
@@ -480,7 +480,7 @@ max-w-max -->
{#if !$events_loc.pres_mgmt.show_content__event_view || $events_loc.pres_mgmt.show_content__event_view == 'default'}
<!-- This session search section should be moved to a separate Svelte component -->
<div class="preset-tonal-success border border-success-500 my-2 p-2 rounded-md flex flex-row items-center">
<div class="ae_container_actions">
<form
onsubmit={() => {
@@ -494,7 +494,7 @@ max-w-max -->
<!-- Show/Hide session location name search button -->
<button
type="button"
class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition-all mx-1"
class="btn btn-sm mx-1 ae_btn_warning"
class:hidden={!$ae_loc.authenticated_access}
onclick={() => {
$events_sess.pres_mgmt.location_name_qry_str = '';
@@ -526,7 +526,7 @@ max-w-max -->
<button
type="button"
class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition-all mx-1"
class="btn btn-sm mx-1 ae_btn_warning"
onclick={() => {
$events_sess.pres_mgmt.fulltext_search_qry_str = '';
$events_trigger = 'load__event_session_obj_li';
@@ -545,7 +545,7 @@ max-w-max -->
placeholder="Search for a session"
id="session_fulltext_search_qry_str"
bind:value={$events_sess.pres_mgmt.fulltext_search_qry_str}
class="input text-1xl hover:text-2xl font-bold font-mono w-80 transition-all mx-1"
class="input text-1xl hover:text-2xl font-bold font-mono w-80 transition-all mx-1 ae_btn_info"
onkeyup={() => {
if ($events_sess.pres_mgmt?.fulltext_search_qry_str && $events_sess.pres_mgmt.fulltext_search_qry_str.length >= 3) {
$events_trigger = 'load__event_session_obj_li';
@@ -557,7 +557,7 @@ max-w-max -->
<button
type="submit"
class="btn btn-lg preset-tonal-success border border-success-500 hover:preset-filled-success-500 text-2xl font-bold w-48 transition-all mx-1"
class="btn btn-lg text-2xl font-bold w-48 mx-1 ae_btn_primary"
onclick={() => {
}}

18
src/routes/events/[event_id]/reports/+page.svelte
View File

@@ -776,11 +776,11 @@ async function handle_qry__event_session(
$events_loc.pres_mgmt.rpt__session_poc_agree = !$events_loc.pres_mgmt.rpt__session_poc_agree;
ae_promises.handle_qry__event_session = handle_qry__event_session({
qry_poc_agree: $events_loc.pres_mgmt.rpt__session_poc_agree ?? false,
})
qry_poc_agree: $events_loc.pres_mgmt.rpt__session_poc_agree ?? false,
})
$events_loc.pres_mgmt.show_report = 'sessions_poc_agree';
}}
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500 transition-all m-1"
class="ae_btn_info btn-sm m-1"
>
{#if $events_loc.pres_mgmt.rpt__session_poc_agree}
<span class="fas fa-toggle-on m-1"></span>
@@ -841,13 +841,13 @@ async function handle_qry__event_session(
$events_loc.pres_mgmt.rpt__presenter_agree = !$events_loc.pres_mgmt.rpt__presenter_agree;
ae_promises.handle_search__event_presenter = handle_search__event_presenter({
agree: $events_loc.pres_mgmt.rpt__presenter_agree ?? false,
ft_search_str: '',
lk_search_str: '',
log_lvl: 2,
});
agree: $events_loc.pres_mgmt.rpt__presenter_agree ?? false,
ft_search_str: '',
lk_search_str: '',
log_lvl: log_lvl,
});
}}
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500 transition-all m-1"
class="ae_btn_info btn btn-sm m-1"
>
{#if $events_loc.pres_mgmt.rpt__presenter_agree}
<!-- <span class="fas fa-check m-1"></span> -->

6
src/routes/events/ae_comp__event_session_obj_li.svelte
View File

@@ -134,7 +134,7 @@ let ae_triggers: key_val = $state({});
href="/events/{session_obj?.event_id}/session/{session_obj?.event_session_id}"
class="
btn btn-md
preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500
ae_btn_secondary_filled
min-w-full max-w-md
sm:w-80
text-xs md:text-sm lg:text-base
@@ -269,7 +269,7 @@ let ae_triggers: key_val = $state({});
{session_obj?.poc_person_full_name}
</span>
<!-- <br> -->
{#if $ae_loc.trusted_access}
{#if $ae_loc.trusted_access && session_obj?.poc_person_primary_email}
<span style="break-inside: avoid;" class="text-xs">
<a href="mailto:{session_obj?.poc_person_primary_email}" class="hover:underline">
<span class="fas fa-envelope mx-1"></span>
@@ -410,7 +410,7 @@ let ae_triggers: key_val = $state({});
// ae_tmp[$events_slct.event_session_id].poc_person_id = $events_slct?.event_session_obj?.poc_person_id_random;
// ae_tmp[$events_slct.event_session_id].show__edit_poc_person = true;
}}
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
class="btn btn-sm ae_btn_warning"
class:hidden={!$ae_loc.edit_mode}
>
<span class="fas fa-edit mx-1"></span>