fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

introduced icon for modals

Browse Source
This commit is contained in:
Felix Hamann 2018-10-13 00:00:44 +02:00
parent 67ba5509b1
commit 18b3fe0e5d
5 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Handler/Course.hs
View File

@ -78,8 +78,8 @@ colCShortDescr = sortable (Just "cshort") (i18nCell MsgCourseShort)
(Just descr) -> cell (Just descr) -> cell
[whamlet| [whamlet|
$newline never $newline never
<span style="float:right"> <div>
^{modal "Beschreibung" (Right $ toWidget descr)} ^{modal "Beschreibung anzeigen" (Right $ toWidget descr)}
|] |]
) )

4
src/Handler/Utils/Table/Cells.hs
View File

@ -78,8 +78,8 @@ courseCell (Course {..}) = anchorCell link name `mappend` desc
Nothing -> mempty Nothing -> mempty
(Just descr) -> cell [whamlet| (Just descr) -> cell [whamlet|
$newline never $newline never
<span style="float:right"> <div>
^{modal "Beschreibung" (Right $ toWidget descr)} ^{modal "Beschreibung anzeigen" (Right $ toWidget descr)}
|] |]
sheetCell :: IsDBTable m a => CourseLink -> SheetName -> DBCell m a sheetCell :: IsDBTable m a => CourseLink -> SheetName -> DBCell m a

15
src/Handler/Utils/Templates.hs
View File

@ -16,5 +16,16 @@ modal modalTrigger modalContent = do
triggerId <- newIdent triggerId <- newIdent
$(widgetFile "widgets/modal") $(widgetFile "widgets/modal")
case modalContent of case modalContent of
Left route -> [whamlet|<a .btn ##{triggerId} href=@{route}>^{modalTrigger}|] -- TODO: refactor this. preferably put svg in separte file somewhere in static?
Right content -> [whamlet|<div .btn ##{triggerId}>^{modalTrigger}|] Left route -> [whamlet|
<div .modal__trigger>
<a href=@{route} ##{triggerId}>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="modal__trigger-icon" x="0px" y="0px" viewBox="0 0 690 490" xml:space="preserve"><rect x="534.6" y="405" width="99" height="39.6"/><rect x="415.8" y="405" width="99" height="39.6"/><path d="M673.2,127.8H118.8v356.4h554.4V127.8z M601.92,166.794l5.334-5.334l10.506,10.506l10.506-10.506l5.334,5.334L623.094,177.3 l10.506,10.506l-5.334,5.334l-10.506-10.51l-10.506,10.506l-5.334-5.33l10.506-10.506L601.92,166.794z M158.4,169.38h198v15.84h-198 V169.38z M657.36,468.36H134.64V226.8h522.72V468.36z"/><rect x="198" y="325.8" width="396" height="15.84"/><rect x="198" y="286.2" width="198" height="15.84"/>
<span .modal__trigger-label>^{modalTrigger}
|]
Right content -> [whamlet|
<div .modal__trigger>
<div ##{triggerId}>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="modal__trigger-icon" x="0px" y="0px" viewBox="0 0 690 490" xml:space="preserve"><rect x="534.6" y="405" width="99" height="39.6"/><rect x="415.8" y="405" width="99" height="39.6"/><path d="M673.2,127.8H118.8v356.4h554.4V127.8z M601.92,166.794l5.334-5.334l10.506,10.506l10.506-10.506l5.334,5.334L623.094,177.3 l10.506,10.506l-5.334,5.334l-10.506-10.51l-10.506,10.506l-5.334-5.33l10.506-10.506L601.92,166.794z M158.4,169.38h198v15.84h-198 V169.38z M657.36,468.36H134.64V226.8h522.72V468.36z"/><rect x="198" y="325.8" width="396" height="15.84"/><rect x="198" y="286.2" width="198" height="15.84"/>
<span .modal__trigger-label>^{modalTrigger}
|]

1
templates/standalone/modal.julius
View File

@ -50,7 +50,6 @@
document.addEventListener('modal-open', openOnEvent, false); document.addEventListener('modal-open', openOnEvent, false);
// if modal has trigger assigned to it open modal on click // if modal has trigger assigned to it open modal on click
if (trigger) { if (trigger) {
trigger.classList.add('modal__trigger');
trigger.addEventListener('click', open, false); trigger.addEventListener('click', open, false);
} }

13
templates/standalone/modal.lucius
View File

@ -60,6 +60,19 @@
.modal__trigger { .modal__trigger {
cursor: pointer; cursor: pointer;
display: inline-flex;
flex-direction: row;
align-items: baseline;
margin-top: 5px;
}
.modal__trigger-icon {
height: 20px;
}
.modal__trigger-label {
font-size: 14px;
padding-left: 5px;
} }
.modal__closer { .modal__closer {