This commit is contained in:
grandeljay 2022-04-05 20:01:56 +02:00
parent 0215a1cf96
commit 6a17231b0b
14 changed files with 2507 additions and 57 deletions

View file

@ -51,6 +51,7 @@
"popup", "popup",
"message", "message",
"list", "list",
"tab",
"api", "api",
"transition" "transition"

View file

@ -1969,6 +1969,11 @@ Floated Menu / Item
border-top: 1px solid #D4D4D5; border-top: 1px solid #D4D4D5;
border-right: 1px solid #D4D4D5; border-right: 1px solid #D4D4D5;
} }
@media only screen and (max-width: 767.98px) {
.stackable .ui.vertical.pointing.menu .item::after {
display: none;
}
}
.ui.pointing.menu .ui.dropdown .menu .item:after, .ui.pointing.menu .ui.dropdown .menu .item:after,
.ui.vertical.pointing.menu .ui.dropdown .menu .item:after { .ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
display: none; display: none;

File diff suppressed because one or more lines are too long

88
semantic/dist/components/tab.css vendored Normal file
View file

@ -0,0 +1,88 @@
/*!
* # Fomantic-UI 2.8.8 - Tab
* http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
UI Tabs
*******************************/
.ui.tab {
display: none;
}
/*******************************
States
*******************************/
/*--------------------
Active
---------------------*/
.ui.tab.active,
.ui.tab.open {
display: block;
}
/*--------------------
Loading
---------------------*/
.ui.tab.loading {
position: relative;
overflow: hidden;
display: block;
min-height: 250px;
}
.ui.tab.loading * {
position: relative !important;
left: -10000px !important;
}
.ui.tab.loading:before,
.ui.tab.loading.segment:before {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: -1.25em 0 0 -1.25em;
width: 2.5em;
height: 2.5em;
border-radius: 500rem;
border: 0.2em solid rgba(0, 0, 0, 0.1);
}
.ui.tab.loading:after,
.ui.tab.loading.segment:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: -1.25em 0 0 -1.25em;
width: 2.5em;
height: 2.5em;
-webkit-animation: loader 0.6s infinite linear;
animation: loader 0.6s infinite linear;
border: 0.2em solid #767676;
border-radius: 500rem;
-webkit-box-shadow: 0 0 0 1px transparent;
box-shadow: 0 0 0 1px transparent;
}
/*******************************
Tab Overrides
*******************************/
/*******************************
User Overrides
*******************************/

1001
semantic/dist/components/tab.js vendored Normal file

File diff suppressed because it is too large Load diff

9
semantic/dist/components/tab.min.css vendored Normal file
View file

@ -0,0 +1,9 @@
/*!
* # Fomantic-UI 2.8.8 - Tab
* http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/.ui.tab{display:none}.ui.tab.active,.ui.tab.open{display:block}.ui.tab.loading{position:relative;overflow:hidden;display:block;min-height:250px}.ui.tab.loading *{position:relative!important;left:-10000px!important}.ui.tab.loading.segment:before,.ui.tab.loading:before{position:absolute;content:'';top:50%;left:50%;margin:-1.25em 0 0 -1.25em;width:2.5em;height:2.5em;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.tab.loading.segment:after,.ui.tab.loading:after{position:absolute;content:'';top:50%;left:50%;margin:-1.25em 0 0 -1.25em;width:2.5em;height:2.5em;-webkit-animation:loader .6s infinite linear;animation:loader .6s infinite linear;border:.2em solid #767676;border-radius:500rem;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}

11
semantic/dist/components/tab.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -38184,6 +38184,12 @@ Floated Menu / Item
border-right: 1px solid #D4D4D5; border-right: 1px solid #D4D4D5;
} }
@media only screen and (max-width: 767.98px) {
.stackable .ui.vertical.pointing.menu .item::after {
display: none;
}
}
.ui.pointing.menu .ui.dropdown .menu .item:after, .ui.pointing.menu .ui.dropdown .menu .item:after,
.ui.vertical.pointing.menu .ui.dropdown .menu .item:after { .ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
display: none; display: none;
@ -40404,6 +40410,90 @@ Floated Menu / Item
/******************************* /*******************************
Site Overrides Site Overrides
*******************************/ *******************************/
/*!
* # Fomantic-UI 2.8.8 - Tab
* http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
UI Tabs
*******************************/
.ui.tab {
display: none;
}
/*******************************
States
*******************************/
/*--------------------
Active
---------------------*/
.ui.tab.active,
.ui.tab.open {
display: block;
}
/*--------------------
Loading
---------------------*/
.ui.tab.loading {
position: relative;
overflow: hidden;
display: block;
min-height: 250px;
}
.ui.tab.loading * {
position: relative !important;
left: -10000px !important;
}
.ui.tab.loading:before,
.ui.tab.loading.segment:before {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: -1.25em 0 0 -1.25em;
width: 2.5em;
height: 2.5em;
border-radius: 500rem;
border: 0.2em solid rgba(0, 0, 0, 0.1);
}
.ui.tab.loading:after,
.ui.tab.loading.segment:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: -1.25em 0 0 -1.25em;
width: 2.5em;
height: 2.5em;
-webkit-animation: loader 0.6s infinite linear;
animation: loader 0.6s infinite linear;
border: 0.2em solid #767676;
border-radius: 500rem;
-webkit-box-shadow: 0 0 0 1px transparent;
box-shadow: 0 0 0 1px transparent;
}
/*******************************
Tab Overrides
*******************************/
/*******************************
User Overrides
*******************************/
/*! /*!
* # Fomantic-UI 2.8.8 - Transition * # Fomantic-UI 2.8.8 - Transition
* http://github.com/fomantic/Fomantic-UI/ * http://github.com/fomantic/Fomantic-UI/

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1757,6 +1757,11 @@ each(@colors, {
border-top: @arrowBorder; border-top: @arrowBorder;
border-right: @arrowBorder; border-right: @arrowBorder;
} }
@media only screen and (max-width: @largestMobileScreen) {
.stackable .ui.vertical.pointing.menu .item::after {
display: none;
}
}
} }
.ui.pointing.menu .ui.dropdown .menu .item:after, .ui.pointing.menu .ui.dropdown .menu .item:after,
.ui.vertical.pointing.menu .ui.dropdown .menu .item:after { .ui.vertical.pointing.menu .ui.dropdown .menu .item:after {

View file

@ -1,4 +1,6 @@
$(function() { $(function() {
$('.menu.profile .item').tab();
$('.ui.calendar').calendar({ $('.ui.calendar').calendar({
type : 'date', type : 'date',
firstDayOfWeek : 1, firstDayOfWeek : 1,

View file

@ -60,73 +60,309 @@ $page->navigation();
<div class="ui container"> <div class="ui container">
<h1 class="ui header"><?= $page->title ?></h1> <h1 class="ui header"><?= $page->title ?></h1>
<div class="ui segment"> <div class="ui stackable grid">
<form class="ui form" method="POST"> <div class="four wide column">
<input type="hidden" name="user-id" value="<?= $user->id ?>" /> <div class="ui vertical pointing fluid menu profile">
<div class="item" data-tab="personal">
<div class="field"> <h4 class="ui header">Personal</h4>
<label><?= __('Email') ?></label> <p>Information regarding yourself</p>
<input type="email" name="user-email" value="<?= $user->email ?>" />
</div>
<div class="two fields">
<div class="field">
<label><?= __('Password') ?></label>
<input type="password" name="user-password" autocomplete="new-password" />
</div> </div>
<div class="item" data-tab="password">
<div class="field"> <h4 class="ui header">Password</h4>
<label><?= __('Password (repeat)') ?></label> <p>Change your password</p>
</div>
<input type="password" name="user-password-repeat" autocomplete="new-password" /> <div class="item" data-tab="language">
<h4 class="ui header">Language</h4>
<p>Your language preferences</p>
</div> </div>
</div> </div>
</div>
<div class="two fields"> <div class="twelve wide stretched column">
<div class="field"> <div class="ui tab" data-tab="personal">
<label><?= __('Birthdate') ?></label> <div class="ui segment">
<div class="ui calendar"> <form class="ui form" method="POST">
<div class="ui input left icon"> <input type="hidden" name="user-id" value="<?= $user->id ?>" />
<i class="calendar icon"></i>
<input type="text" <div class="three fields">
name="user-birthdate" <div class="field">
placeholder="<?= __('Pick a date') ?>" <label><?= __('First name') ?></label>
value="<?= $user->birthdate ?>"
/> <input type="text" name="user-name-first" value="" />
</div>
<div class="field">
<label><?= __('Last name') ?></label>
<input type="text" name="user-name-last" value="" />
</div>
<div class="field">
<label><?= __('Nickname') ?></label>
<input type="text" name="user-name-nick" value="" />
</div>
</div> </div>
</div>
</div>
<div class="field"> <div class="field">
<label><?= __('Language') ?></label> <label><?= __('Email') ?></label>
<select class="ui search dropdown" name="user-locale"> <input type="email" name="user-email" value="<?= $user->email ?>" />
<?php if (!in_array('en', $locales)) { ?> </div>
<option value="<?= 'en' ?>"><?= \Locale::getDisplayName('en', $user->locale) ?></option>
<?php } ?> <div class="two fields">
<div class="field">
<label><?= __('Password') ?></label>
<input type="password" name="user-password" autocomplete="new-password" />
</div>
<div class="field">
<label><?= __('Password (repeat)') ?></label>
<input type="password" name="user-password-repeat" autocomplete="new-password" />
</div>
</div>
<div class="two fields">
<div class="field">
<label><?= __('Birthdate') ?></label>
<div class="ui calendar">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text"
name="user-birthdate"
placeholder="<?= __('Pick a date') ?>"
value="<?= $user->birthdate ?>"
/>
</div>
</div>
</div>
<div class="field">
<label><?= __('Language') ?></label>
<select class="ui search dropdown" name="user-locale">
<?php if (!in_array('en', $locales)) { ?>
<option value="<?= 'en' ?>"><?= \Locale::getDisplayName('en', $user->locale) ?></option>
<?php } ?>
<?php foreach ($locales as $locale) { ?>
<?php if ($locale === $user->locale) { ?>
<option value="<?= $locale ?>" selected><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
<?php } else { ?>
<option value="<?= $locale ?>"><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
</div>
<div class="ui error message"></div>
<input class="ui primary button"
type="submit"
value="<?= __('Save') ?>"
title="<?= __('Save') ?>"
/>
</form>
<?php foreach ($locales as $locale) { ?>
<?php if ($locale === $user->locale) { ?>
<option value="<?= $locale ?>" selected><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
<?php } else { ?>
<option value="<?= $locale ?>"><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
<?php } ?>
<?php } ?>
</select>
</div> </div>
</div> </div>
<div class="ui error message"></div> <div class="ui tab" data-tab="password">
<div class="ui segment">
<input class="ui primary button" <form class="ui form" method="POST">
type="submit" <input type="hidden" name="user-id" value="<?= $user->id ?>" />
value="<?= __('Save') ?>"
title="<?= __('Save') ?>" <div class="three fields">
/> <div class="field">
</form> <label><?= __('First name') ?></label>
<input type="text" name="user-name-first" value="" />
</div>
<div class="field">
<label><?= __('Last name') ?></label>
<input type="text" name="user-name-last" value="" />
</div>
<div class="field">
<label><?= __('Nickname') ?></label>
<input type="text" name="user-name-nick" value="" />
</div>
</div>
<div class="field">
<label><?= __('Email') ?></label>
<input type="email" name="user-email" value="<?= $user->email ?>" />
</div>
<div class="two fields">
<div class="field">
<label><?= __('Password') ?></label>
<input type="password" name="user-password" autocomplete="new-password" />
</div>
<div class="field">
<label><?= __('Password (repeat)') ?></label>
<input type="password" name="user-password-repeat" autocomplete="new-password" />
</div>
</div>
<div class="two fields">
<div class="field">
<label><?= __('Birthdate') ?></label>
<div class="ui calendar">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text"
name="user-birthdate"
placeholder="<?= __('Pick a date') ?>"
value="<?= $user->birthdate ?>"
/>
</div>
</div>
</div>
<div class="field">
<label><?= __('Language') ?></label>
<select class="ui search dropdown" name="user-locale">
<?php if (!in_array('en', $locales)) { ?>
<option value="<?= 'en' ?>"><?= \Locale::getDisplayName('en', $user->locale) ?></option>
<?php } ?>
<?php foreach ($locales as $locale) { ?>
<?php if ($locale === $user->locale) { ?>
<option value="<?= $locale ?>" selected><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
<?php } else { ?>
<option value="<?= $locale ?>"><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
</div>
<div class="ui error message"></div>
<input class="ui primary button"
type="submit"
value="<?= __('Save') ?>"
title="<?= __('Save') ?>"
/>
</form>
</div>
</div>
<div class="ui tab" data-tab="password">
<div class="ui segment">
<form class="ui form" method="POST">
<input type="hidden" name="user-id" value="<?= $user->id ?>" />
<div class="three fields">
<div class="field">
<label><?= __('First name') ?></label>
<input type="text" name="user-name-first" value="" />
</div>
<div class="field">
<label><?= __('Last name') ?></label>
<input type="text" name="user-name-last" value="" />
</div>
<div class="field">
<label><?= __('Nickname') ?></label>
<input type="text" name="user-name-nick" value="" />
</div>
</div>
<div class="field">
<label><?= __('Email') ?></label>
<input type="email" name="user-email" value="<?= $user->email ?>" />
</div>
<div class="two fields">
<div class="field">
<label><?= __('Password') ?></label>
<input type="password" name="user-password" autocomplete="new-password" />
</div>
<div class="field">
<label><?= __('Password (repeat)') ?></label>
<input type="password" name="user-password-repeat" autocomplete="new-password" />
</div>
</div>
<div class="two fields">
<div class="field">
<label><?= __('Birthdate') ?></label>
<div class="ui calendar">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text"
name="user-birthdate"
placeholder="<?= __('Pick a date') ?>"
value="<?= $user->birthdate ?>"
/>
</div>
</div>
</div>
<div class="field">
<label><?= __('Language') ?></label>
<select class="ui search dropdown" name="user-locale">
<?php if (!in_array('en', $locales)) { ?>
<option value="<?= 'en' ?>"><?= \Locale::getDisplayName('en', $user->locale) ?></option>
<?php } ?>
<?php foreach ($locales as $locale) { ?>
<?php if ($locale === $user->locale) { ?>
<option value="<?= $locale ?>" selected><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
<?php } else { ?>
<option value="<?= $locale ?>"><?= \Locale::getDisplayName($locale, $user->locale) ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
</div>
<div class="ui error message"></div>
<input class="ui primary button"
type="submit"
value="<?= __('Save') ?>"
title="<?= __('Save') ?>"
/>
</form>
</div>
</div>
</div>
</div>
<div class="ui segment">
asdf
</div> </div>
</div> </div>
</main> </main>