kamilniemczycki/kamilcraft.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

updated project view

Browse Source
This commit is contained in:
Kamil Niemczycki 2022-07-24 17:33:58 +02:00
parent 5712c890af
commit a4fe5e4efc
Signed by: kamilniemczycki
GPG Key ID: 04D4E2012F969213
1 changed files with 74 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

230
src/views/ProjectView.vue
View File

@ -1,74 +1,78 @@
<template>
<section
v-if="isLoaded"
class="project"
class="max-w-screen-xl mx-auto px-6 xl:px-2 py-8"
>
<header class="project_header">
<h1>{{ project.title }}</h1>
<ul class="project_info">
<li class="info_text">
<font-awesome-icon
class="icon"
<header class="text-neutral-800 font-roboto">
<h1 class="text-center text-4xl font-light pb-5">
{{ project.title }}
</h1>
<ul class="grid grid-cols-2 gap-3 md:flex md:gap-5 justify-center list-none">
<li class="flex items-center gap-2">
<FontAwesomeIcon
class="w-4"
:icon="['far', 'clock']"
/>
<span>{{ project.release_date }}</span>
</li>
<li class="info_text">
<font-awesome-icon
class="icon"
<li class="flex items-center gap-2">
<FontAwesomeIcon
class="w-4"
:icon="['far', 'user']"
/>
<span>{{ project.author }}</span>
</li>
<li class="info_text">
<font-awesome-icon
class="icon"
<li class="flex items-center gap-2">
<FontAwesomeIcon
class="w-4"
:icon="['far', 'folder']"
/>
<span>{{ getCategoryName(project.categories) }}</span>
</li>
<li class="info_text">
<font-awesome-icon
class="icon"
<li class="flex items-center gap-2">
<FontAwesomeIcon
class="w-4"
:icon="['fas', 'code-branch']"
/>
<span>{{ project.project_version }}</span>
</li>
<li
v-if="project.project_url"
class="info_text"
class="flex items-center gap-2"
>
<font-awesome-icon
class="icon"
<FontAwesomeIcon
class="w-4"
:icon="['fas', 'link']"
/>
<span><a
:href="project.project_url"
target="_blank"
rel="noopener nofollow noreferrer"
>Link</a></span>
<span>
<a
:href="project.project_url"
target="_blank"
rel="noopener nofollow noreferrer"
>
Link
</a>
</span>
</li>
</ul>
</header>
<div class="container">
<component
:is="`figure`"
class="project-photo"
>
<div class="pt-5">
<figure class="w-full shadow-xl">
<img
:src="`${project.images.large}`"
class="block max-h-[31.25rem] object-cover"
:src="project.images.large"
:alt="project.title"
>
</component>
</figure>
<div
class="content"
class="markdown mt-9"
v-html="markdownToHtml"
/>
</div>
</section>
<div
v-else
class="loading"
class="flex items-center"
>
<div class="loading_animation" />
</div>
@ -127,143 +131,57 @@ function loadProject(id) {
<style lang="scss">
@import "scss/default";
.loading {
display: flex;
align-items: center;
a {
@apply text-neutral-800 hover:text-kamilcraft-green;
}
.project {
.project_header {
@extend .container;
text-align: center;
margin-bottom: 25px;
.markdown {
h1 {
@apply text-4xl;
}
h1 {
font-size: 2.2em;
font-weight: lighter;
line-height: 2.4em;
}
h2 {
@apply text-[2rem];
}
.project_info {
display: flex;
list-style: none;
justify-content: center;
h3 {
@apply text-[1.5rem];
}
.info_text {
display: flex;
align-items: center;
p, ol li, ul li {
@apply text-lg;
}
.icon {
width: 2em;
}
p + ol, p + ul, p + blockquote {
@apply -mb-2.5;
}
span {
font-weight: lighter;
white-space: nowrap;
}
ol {
@apply list-decimal;
}
&:not(&:last-child) {
margin-right: 15px;
}
}
@include media-tablet {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 15px;
ul {
@apply list-disc;
}
.info-text {
&:not(&:last-child) {
margin-right: 0;
}
}
}
ol, ul {
@apply mb-2.5;
padding-inline-start: 1.75rem;
li img {
@apply block w-full pr-1 pb-1 mt-3.5;
}
}
.container {
.project-photo {
box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
}
p {
@apply mb-2.5 text-justify;
}
.project-photo, .project-photo img {
width: 100%;
}
blockquote {
@apply pl-6 ml-5 border-neutral-400;
.project-photo img {
display: block;
object-fit: cover;
max-height: 500px;
}
.content {
margin: 35px 0;
a {
color: #8D8D8D;
&:hover {
color: #A2CF00;
}
}
h2, h3 {
margin-top: 15px;
margin-bottom: 5px;
}
h2:first-of-type {
margin-top: 0;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
p, ol li, ul li {
line-height: 1.8em;
font-size: 1.1em;
@include media-tablet {
font-size: 1.2em;
line-height: 1.5em;
}
}
p + ol, p + ul, p + blockquote {
margin-top: -10px;
}
ol, ul {
margin-bottom: 10px;
padding-inline-start: 2.1em;
li img {
display: block;
width: 100%;
padding: 0 5px 5px;
margin-top: .9em;
}
}
p {
margin-bottom: 10px;
text-align: justify;
/* text-indent: 1.5em; */
}
blockquote {
padding-left: 25px;
margin-left: 1.3em;
border-left: 1px solid rgb(116, 116, 116);
p {
text-indent: unset;
}
}
p {
text-indent: unset;
}
}
}