tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-25 14:44:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

Cool, item containeers are now collapsable

Browse Source
This commit is contained in:
Alicia Sykes 2019-08-16 23:32:12 +01:00
parent 5360a2710a
commit cfdb34a891
2 changed files with 37 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/Collapsable.vue
View File

@ -1,14 +1,12 @@
<template> <template>
<div class="collapsable"> <div class="collapsable">
<input id="collapsible" class="toggle" type="checkbox"> <input id="collapsible" class="toggle" type="checkbox" checked>
<label for="collapsible" class="lbl-toggle" tabindex="0">More Info</label> <label for="collapsible" class="lbl-toggle" tabindex="0">
<h2>{{ title }}</h2>
</label>
<div class="collapsible-content"> <div class="collapsible-content">
<div class="content-inner"> <div class="content-inner">
<p> <slot></slot>
QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with
its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without
plug-ins. Test-Driven Development.
</p>
</div> </div>
</div> </div>
</div> </div>
@ -16,9 +14,9 @@
<script> <script>
export default { export default {
name: 'Footer', name: 'CollapsableContainer',
props: { props: {
title: String
} }
} }
</script> </script>
@ -27,7 +25,14 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.collapsable { .collapsable {
border: 2px dashed red; min-width: 350px;
padding: 5px;
margin: 10px;
border-radius: 10px;
background: #1CA8DD;
background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
box-shadow: 1px 1px 2px #130f23;
.wrap-collabsible { .wrap-collabsible {
margin-bottom: 1.2rem 0; margin-bottom: 1.2rem 0;
@ -37,34 +42,33 @@ export default {
display: none; display: none;
} }
label {
outline: none;
}
.lbl-toggle { .lbl-toggle {
display: block; display: block;
font-weight: bold;
font-family: monospace;
font-size: 1.2rem;
text-transform: uppercase;
text-align: center;
padding: 1rem; padding: 1rem;
color: #A77B0E;
background: #FAE042;
cursor: pointer; cursor: pointer;
border-radius: 7px; border-radius: 7px;
transition: all 0.25s ease-out; transition: all 0.25s ease-out;
text-align: left;
color: #2f323ae6;
h2 {
margin: 0;
padding: 0;
display: inline;
}
} }
.lbl-toggle:hover { .lbl-toggle:hover {
color: #7C5A0B; color: #2f323a;
} }
.lbl-toggle::before { .lbl-toggle::before {
content: ' '; content: ' ';
display: inline-block; display: inline-block;
border-top: 5px solid transparent; border-top: 5px solid transparent;
border-bottom: 5px solid transparent; border-bottom: 5px solid transparent;
border-left: 5px solid currentColor; border-left: 5px solid currentColor;
@ -83,6 +87,8 @@ export default {
max-height: 0px; max-height: 0px;
overflow: hidden; overflow: hidden;
transition: max-height .25s ease-in-out; transition: max-height .25s ease-in-out;
background: #2f323ae6;
border-radius: 0 0 10px 10px;
} }
.toggle:checked + .lbl-toggle + .collapsible-content { .toggle:checked + .lbl-toggle + .collapsible-content {
@ -95,11 +101,7 @@ export default {
} }
.collapsible-content .content-inner { .collapsible-content .content-inner {
background: rgba(250, 224, 66, .2); padding: 0.5rem 1rem;
border-bottom: 1px solid rgba(250, 224, 66, .45);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: .5rem 1rem;
} }
} }
</style> </style>

6
src/views/Home.vue
View File

@ -13,7 +13,9 @@
<ItemGroup title="External Infrastructure"/> <ItemGroup title="External Infrastructure"/>
<ItemGroup title="Utilities"/> <ItemGroup title="Utilities"/>
<Collapsable />> <Collapsable title="Server Management">
<p>Lorem Ipsum</p>
</Collapsable>
</div> </div>
</div> </div>
</template> </template>
@ -61,6 +63,8 @@ span.subtitle {
.item-group-container { .item-group-container {
display: flex; display: flex;
margin: 2em 0; margin: 2em 0;
align-items:flex-start;
align-content:flex-start;
.item-group-outer { .item-group-outer {
margin: 10px; margin: 10px;
} }