mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-01 11:59:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: abstract

Browse source 
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
Corentin Thomasset 2020-06-06 23:41:09 +02:00 • committed by Corentin THOMASSET
parent 9f4a257599
commit b3d63734f0
3 changed files with 116 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/routes/About.vue
View file

@ -1,5 +1,17 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
<v-card class="single-card">
<v-card-title>About</v-card-title>
<v-card-text><Abstract /></v-card-text>
</v-card>
</template>
<script>
import Abstract from "../components/Abstract";
export default {
name: "About",
components : {
Abstract
},
}
</script>

74
src/routes/Home.vue
View file

@ -1,25 +1,45 @@
<template>
<v-card class="single-card">
<v-card-text>
<div class="card-wrapper ">
<div v-for="item in items" :key="item.text" class="pa-2">
<v-card class="card-element" color="primary" :to="item.path">
<v-card-text>
<v-icon>{{ item.icon }}</v-icon>
<div class="item-title">{{item.text}}</div>
</v-card-text>
</v-card>
</div>
</div>
</v-card-text>
</v-card>
<div>
<v-row justify="center" align="center">
<v-col cols="12" lg="5" md="12">
<v-card>
<v-card-title>IT-Tools</v-card-title>
<v-card-text class="description">
<Abstract />
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row justify="center" align="center">
<v-col cols="12" lg="8" md="12">
<v-card class="card-auto">
<v-card-text>
<div class="card-wrapper ">
<div v-for="item in items" :key="item.text" class="pa-2">
<v-card class="card-element" color="primary" :to="item.path">
<v-card-text>
<v-icon>{{ item.icon }}</v-icon>
<div class="item-title">{{item.text}}</div>
</v-card-text>
</v-card>
</div>
</div>
</v-card-text>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
import {toolsComponentsFlat} from "../router";
import Abstract from "../components/Abstract";
export default {
name: 'Home',
components : {
Abstract
},
data: () => ({
items: toolsComponentsFlat
})
@ -27,25 +47,33 @@
</script>
<style lang="less" scoped>
.card-auto {
width: auto;
}
.card-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
div {
flex: 1 1 33%;
flex: 0 1 20%;
@media only screen and (max-width: 800px) {
flex: 0 1 33%;
}
@media only screen and (max-width: 620px) {
flex: 0 1 50%;
}
@media only screen and (max-width: 450px) {
@media only screen and (max-width: 420px) {
flex: 0 1 220px;
margin: auto;
}
@media only screen and (max-width: 300px) {
flex: 0 1 100%;
}
.card-element {
width: 100%;
border-radius: 24px 4px !important;
color: #ffffff !important;
font-weight: bold !important;
@ -60,25 +88,29 @@
opacity: 0.9;
}
.v-card__text {
padding: 16px 10px;
}
.v-icon {
font-size: 50px;
font-size: 40px;
color: #ffffff;
margin: 15px 0;
margin: 10px 0;
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.item-title {
overflow-wrap: anywhere;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-size: 16px;
line-height: 22px;
height: 44px;
opacity: 1;
color: #ffffff;
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
}
}