mirror/devicedetector.net
1
0
Fork 0
mirror of https://github.com/Findus23/devicedetector.net.git synced 2024-09-19 15:43:46 +02:00
Code Releases Activity

better homepage collapsable

Browse source
This commit is contained in:
Lukas Winkler 2019-09-16 20:02:17 +02:00
parent de32946361
commit a2146d724c
Signed by: lukas
GPG key ID: 54DE4D798D244853
1 changed files with 43 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
client/src/views/Main.vue
View file

@ -61,12 +61,15 @@
</div>
</div>
</div>
<div v-if="gotData" id="detailsBox">
<b-button variant="primary" :aria-expanded="showJSON"
@click="showJSON=!showJSON">
Show Device Detector response
</b-button>
<b-collapse id="collapse-1" class="mt-2 box" v-model="showJSON">
<div v-if="gotData" id="detailsBox" class="mt-2 box">
<div :class="{collapseButton:true,open:showJSON}" :aria-expanded="showJSON"
@click="showJSON=!showJSON" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path d="M6.7 15.7l5.3-5.3 5.3 5.3 1.4-1.4L12 7.6l-6.7 6.7z"/>
</svg>
<h3>raw data</h3>
</div>
<b-collapse id="collapse-1" class="collapseContent" v-model="showJSON">
<pre class="json"><code style="text-align: left" v-html="prettyJSON"></code></pre>
</b-collapse>
</div>
@ -196,4 +199,38 @@ export default Vue.extend({
top: 10px;
width: 20px;
}
#detailsBox {
padding: 0;
.collapseButton {
padding: 20px;
cursor: pointer;
svg {
position: absolute;
transform: rotate(90deg);
transition: transform .3s;
}
&:hover, &:focus, &.open {
svg {
transform: rotate(180deg);
}
}
}
h3 {
text-align: center;
margin: 0;
font-weight: 400;
}
}
.collapseContent {
border-top: 1px solid #ddd;
pre {
padding: 20px;
}
}
</style>