mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-22 07:46:15 -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
parent 7dc70c5741
commit f2af2ed35d
3 changed files with 116 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/components/Abstract.vue Normal file
View file

@ -0,0 +1,48 @@
<template>
<div>
<h2>Hello, World!</h2>
<p class="text-justify">
Welcome to <strong>IT-Tools</strong>! This wonderful website, originally created with ❤ by
<a href="//corentin-thomasset.fr">Corentin Thomasset</a>, aggregate a set of useful tools
that every developer may need once in a while.
</p>
<v-row>
<v-col cols="12" lg="6" md="12">
<h2>A tool is missing?</h2>
<p class="text-justify">
If you need a tool that is not currently not present here, and you think can be
relevant, you are welcome to submit a feature request <a
href="//github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=enhancement&template=feature_request.md&title=%5BFEAT%5D%20My%20feature">here</a>.
</p>
</v-col>
<v-col cols="12" lg="6" md="12">
<h2>Found a bug?</h2>
<p class="text-justify">
If you found a bug, or something broken that doesn't work as expected, please fill a bug report here <a
href="//github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=bug&template=bug_report.md&title=%5BBUG%5D%20My%20bug">here</a>.
</p>
</v-col>
</v-row>
</div>
</template>
<script>
export default {
name: "Abstract"
}
</script>
<style scoped lang="less">
a {
border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
text-decoration: none;
color: inherit !important;
&:hover {
color: #4CAF50 !important;
border-bottom: 1px solid;
}
}
</style>

18
src/routes/About.vue
View file

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