mirror of
https://github.com/namibia/awesome-cheatsheets.git
synced 2024-12-23 02:28:55 +00:00
feat(base-cheatsheet): initialize component
This commit is contained in:
parent
93b68991dc
commit
fb5da7dff2
65
components/BaseCheatsheet.vue
Normal file
65
components/BaseCheatsheet.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<!-- *************************************************************************
|
||||
TEMPLATE
|
||||
************************************************************************* -->
|
||||
|
||||
<template lang="pug">
|
||||
.c-base-cheatsheet
|
||||
img(
|
||||
:src="thumbnail"
|
||||
class="c-base-cheatsheet__thumbnail"
|
||||
)
|
||||
.c-base-cheatsheet__content
|
||||
span.c-base-cheatsheet__name The {{ name }} Cheatsheet
|
||||
</template>
|
||||
|
||||
<!-- *************************************************************************
|
||||
SCRIPT
|
||||
************************************************************************* -->
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
thumbnail: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- *************************************************************************
|
||||
STYLE
|
||||
************************************************************************* -->
|
||||
|
||||
<style lang="scss">
|
||||
$c: ".c-base-cheatsheet";
|
||||
|
||||
#{$c} {
|
||||
padding: 10px;
|
||||
border: 1px solid #313d4f;
|
||||
border-radius: 4px;
|
||||
background: #273142;
|
||||
|
||||
#{$c}__thumbnail {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#{$c}__content {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
|
||||
#{$c}__name {
|
||||
margin-bottom: 20px;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -36,11 +36,11 @@ $c: ".c-base-divider";
|
||||
align-items: center;
|
||||
|
||||
#{$c}__category {
|
||||
font-size: 18px;
|
||||
margin-right: 40px;
|
||||
color: #ffffff;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
margin-right: 40px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#{$c}__line {
|
||||
|
@ -42,7 +42,7 @@ $c: ".l-default";
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
padding: 60px 0 100px;
|
||||
padding: 60px 0 40px;
|
||||
min-height: 100%;
|
||||
background-color: #1b2431;
|
||||
color: white;
|
||||
@ -96,8 +96,8 @@ html {
|
||||
#{$c} {
|
||||
#{$c}__copyright {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
112
pages/index.vue
112
pages/index.vue
@ -15,11 +15,20 @@
|
||||
|
||||
section(
|
||||
v-for="(category, index) in categories"
|
||||
:key="category.name"
|
||||
class="c-index__category"
|
||||
)
|
||||
base-divider(
|
||||
:category="'0' + (index + 1) + '. ' + category.name"
|
||||
class="c-index__divider"
|
||||
)
|
||||
.c-index__cheatsheets
|
||||
base-cheatsheet(
|
||||
v-for="cheatsheet in category.cheatsheets"
|
||||
:key="cheatsheet.name"
|
||||
:name="cheatsheet.name"
|
||||
:thumbnail="cheatsheet.thumbnail"
|
||||
)
|
||||
</template>
|
||||
|
||||
<!-- *************************************************************************
|
||||
@ -27,10 +36,12 @@
|
||||
************************************************************************* -->
|
||||
|
||||
<script>
|
||||
import BaseCheatsheet from "@/components/BaseCheatsheet";
|
||||
import BaseDivider from "@/components/BaseDivider";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BaseCheatsheet,
|
||||
BaseDivider
|
||||
},
|
||||
|
||||
@ -38,19 +49,93 @@ export default {
|
||||
return {
|
||||
categories: [
|
||||
{
|
||||
name: "Languages"
|
||||
name: "Languages",
|
||||
cheatsheets: [
|
||||
{
|
||||
name: "Bash",
|
||||
thumbnail: "bash.jpg"
|
||||
},
|
||||
{
|
||||
name: "JavaScript",
|
||||
thumbnail: "javascript.jpg"
|
||||
},
|
||||
{
|
||||
name: "PHP",
|
||||
thumbnail: "php.jpg"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Backend"
|
||||
name: "Backend",
|
||||
cheatsheets: [
|
||||
{
|
||||
name: "Django",
|
||||
thumbnail: "django.jpg"
|
||||
},
|
||||
{
|
||||
name: "Feathers.js",
|
||||
thumbnail: "feathers.jpg"
|
||||
},
|
||||
{
|
||||
name: "Moleculer",
|
||||
thumbnail: "moleculer.jpg"
|
||||
},
|
||||
{
|
||||
name: "Node.js",
|
||||
thumbnail: "node.jpg"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Frontend"
|
||||
name: "Frontend",
|
||||
cheatsheets: [
|
||||
{
|
||||
name: "Angular.js",
|
||||
thumbnail: "angularjs.jpg"
|
||||
},
|
||||
{
|
||||
name: "HTML5",
|
||||
thumbnail: "html5.jpg"
|
||||
},
|
||||
{
|
||||
name: "React.js",
|
||||
thumbnail: "react.jpg"
|
||||
},
|
||||
{
|
||||
name: "Vue.js",
|
||||
thumbnail: "vue.jpg"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Databases"
|
||||
name: "Databases",
|
||||
cheatsheets: [
|
||||
{
|
||||
name: "Redis",
|
||||
thumbnail: "redis.jpg"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Tools"
|
||||
name: "Tools",
|
||||
cheatsheets: [
|
||||
{
|
||||
name: "Docker",
|
||||
thumbnail: "docker.jpg"
|
||||
},
|
||||
{
|
||||
name: "Kubernetes",
|
||||
thumbnail: "kubernetes.jpg"
|
||||
},
|
||||
{
|
||||
name: "VIM",
|
||||
thumbnail: "vim.jpg"
|
||||
},
|
||||
{
|
||||
name: "Xcode",
|
||||
thumbnail: "xcode.jpg"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -80,7 +165,22 @@ $c: ".c-index";
|
||||
}
|
||||
|
||||
#{$c}__category {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#{$c}__divider {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
#{$c}__cheatsheets {
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: repeat(auto-fill, 270px);
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user