Skip to content

Commit

Permalink
Merge pull request #16 from saferwall/fixs
Browse files Browse the repository at this point in the history
Logo Update , rescale paddings, comments
  • Loading branch information
ayoubfaouzi authored Sep 29, 2021
2 parents 8427221 + a6950f4 commit 5cd7172
Show file tree
Hide file tree
Showing 27 changed files with 954 additions and 275 deletions.
6 changes: 5 additions & 1 deletion .github/workflows/build.yaml
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
name: UI CI
on: [push]
on:
push:
branches:
- main
- build
env:
IMAGE: saferwall/ui
jobs:
Expand Down
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
},
"dependencies": {
"@tailwindcss/postcss7-compat": "^2.1.2",
"@tiptap/starter-kit": "^2.0.0-beta.112",
"@tiptap/vue-3": "^2.0.0-beta.64",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"dateformat": "^4.5.1",
Expand Down
100 changes: 100 additions & 0 deletions src/assets/images/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
172 changes: 39 additions & 133 deletions src/common/components/Progress.vue
Original file line number Diff line number Diff line change
@@ -1,149 +1,55 @@
<template>
<div class="progress grid grid-cols-10 gap-2">
<div class="circle col-span-1">
<strong class="rate">{{ rate.value }}</strong>
<span>/{{ rate.count }}</span>
<svg :height="radius * 2" :width="radius * 2" class="circle-rate">
<circle
:class="`type${getRateColor}`"
:stroke-dasharray="circumference + ' ' + circumference"
:style="{ strokeDashoffset: strokeDashoffset }"
:stroke-width="stroke"
fill="rgba(25,25,25,0.05)"
:r="normalizedRadius"
:cx="radius"
:cy="radius"
/>
</svg>
</div>

<div class="message col-span-5" :class="`type${getRateColor}`">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mr-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>

{{ message }}
</div>

<div class="submission grid col-span-2">
<strong class="uppercase text-gray"> First Submission </strong>
<time class="font-bold">{{ getDateSubmission }}</time>
</div>

<div class="buttons col-span-2">
<Btn class="btn-circle h-20 w-20 flex items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="25.219"
height="31.798"
viewBox="0 0 25.219 31.798"
>
<g transform="translate(0)">
<path
d="M93.929,55.8H75.289A3.289,3.289,0,0,1,72,52.508V27.289A3.289,3.289,0,0,1,75.289,24H90.64l6.579,6.579V52.508A3.289,3.289,0,0,1,93.929,55.8Z"
transform="translate(-72 -24)"
fill="#ebedff"
/>
<path
d="M72,360H97.219v5.482a3.289,3.289,0,0,1-3.289,3.289H75.289A3.289,3.289,0,0,1,72,365.482Z"
transform="translate(-72 -336.974)"
fill="#3b3cb2"
/>
<path
d="M350.579,30.579h-3.289A3.289,3.289,0,0,1,344,27.289V24Z"
transform="translate(-325.36 -24)"
fill="#8c8ac9"
/>
<path
d="M180.061,126.579v-2.193h-2.353a3.817,3.817,0,0,0-.3-.729l1.663-1.663-1.551-1.551-1.663,1.663a3.816,3.816,0,0,0-.729-.3V120h-2.193v1.8a3.815,3.815,0,0,0-.729.3l-1.663-1.663-1.551,1.551,1.663,1.663a3.817,3.817,0,0,0-.3.729H168v2.193h2.353a3.817,3.817,0,0,0,.3.729l-1.663,1.663,1.551,1.551,1.663-1.663a3.815,3.815,0,0,0,.729.3v1.8h2.193v-1.8a3.816,3.816,0,0,0,.729-.3l1.663,1.663,1.551-1.551-1.663-1.663a3.816,3.816,0,0,0,.3-.729Zm-6.031.548a1.645,1.645,0,1,1,1.645-1.645A1.645,1.645,0,0,1,174.031,127.127Z"
transform="translate(-161.421 -113.421)"
fill="#8c8ac9"
/>
<path
d="M152,216h14.254v5.482H152Z"
transform="translate(-146.518 -202.842)"
fill="#babdeb"
/>
<g transform="translate(6.579 14.802)">
<path
d="M220.934,241.1h-4.386a.548.548,0,0,1,0-1.1h4.386a.548.548,0,1,1,0,1.1Z"
transform="translate(-212.711 -240)"
fill="#fff"
/>
<path
d="M170.741,385.1a.548.548,0,1,0,0-1.1h-2.193a.548.548,0,0,0-.548.548v4.386a.548.548,0,0,0,.548.548h2.193a.548.548,0,0,0,0-1.1H169.1v-1.1h.548a.548.548,0,0,0,0-1.1H169.1v-1.1Z"
transform="translate(-168 -374.132)"
fill="#fff"
/>
<path
d="M298.741,385.1a.548.548,0,1,0,0-1.1h-2.193a.548.548,0,0,0-.548.548v4.386a.548.548,0,0,0,.548.548h2.193a.548.548,0,0,0,0-1.1H297.1v-1.1h.548a.548.548,0,0,0,0-1.1H297.1v-1.1Z"
transform="translate(-287.228 -374.132)"
fill="#fff"
/>
<path
d="M234.985,384.056a.548.548,0,0,0-.736.245l-.606,1.212-.606-1.212a.548.548,0,0,0-.981.49l.974,1.948-.974,1.948a.548.548,0,1,0,.981.49l.606-1.212.606,1.212a.548.548,0,1,0,.981-.49l-.974-1.948.974-1.948A.548.548,0,0,0,234.985,384.056Z"
transform="translate(-227.612 -374.13)"
fill="#fff"
/>
</g>
</g>
<div class="progress grid grid-cols-11 gap-2">
<div
class="flex md:flex-row flex-col items-center col-span-6"
:class="`type${getRateColor}`"
>
<div class="circle">
<strong class="rate">{{ rate.value }}</strong>
<span>/{{ rate.count }}</span>
<svg :height="radius * 2" :width="radius * 2" class="circle-rate">
<circle
:class="`type${getRateColor}`"
:stroke-dasharray="circumference + ' ' + circumference"
:style="{ strokeDashoffset: strokeDashoffset }"
:stroke-width="stroke"
fill="rgba(25,25,25,0.05)"
:r="normalizedRadius"
:cx="radius"
:cy="radius"
/>
</svg>
</Btn>
<Btn class="btn-circle h-20 w-20 flex items-center justify-center">
</div>

<div class="message">
<svg
xmlns="http://www.w3.org/2000/svg"
width="25.303"
height="28.114"
viewBox="0 0 25.303 28.114"
class="h-6 w-6 mr-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
d="M12.686,26.274V17.84a.94.94,0,0,1,.937-.937H29.554V8.937A.94.94,0,0,0,28.617,8H14.091v4.686a.937.937,0,0,1-.937.937H8V34.24a.94.94,0,0,0,.937.937h19.68a.94.94,0,0,0,.937-.937V27.211H13.623A.94.94,0,0,1,12.686,26.274Zm0,0"
transform="translate(-7.531 -7.531)"
fill="#9bc9ff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
<g>
<path
d="M23.9,8.9H22.492v-7.5A1.406,1.406,0,0,0,21.086,0H6.56c-.01,0-.018,0-.028.005A.474.474,0,0,0,6.42.026L6.376.04a.461.461,0,0,0-.134.084L.151,5.748a.455.455,0,0,0-.1.14.43.43,0,0,0-.018.047.46.46,0,0,0-.027.131c0,.01-.006.019-.006.029V26.709a1.406,1.406,0,0,0,1.406,1.406h19.68a1.406,1.406,0,0,0,1.406-1.406v-6.56H23.9A1.406,1.406,0,0,0,25.3,18.743V10.309A1.406,1.406,0,0,0,23.9,8.9ZM6.091,1.539V5.154a.469.469,0,0,1-.469.469H1.667Zm15.463,25.17a.469.469,0,0,1-.469.469H1.406a.469.469,0,0,1-.469-.469V6.56H5.623A1.406,1.406,0,0,0,7.029,5.154V.937H21.086a.469.469,0,0,1,.469.469V8.9H6.091a1.406,1.406,0,0,0-1.406,1.406v8.434a1.406,1.406,0,0,0,1.406,1.406H21.554Zm2.811-7.966a.469.469,0,0,1-.469.469H6.091a.469.469,0,0,1-.469-.469V10.309a.469.469,0,0,1,.469-.469H23.9a.469.469,0,0,1,.469.469Zm0,0"
transform="translate(0)"
fill="#1e81ce"
/>
<path
d="M122.343,192h-1.874a.469.469,0,0,0-.469.469v5.623a.469.469,0,0,0,.469.469h1.874a2.346,2.346,0,0,0,2.343-2.343v-1.874A2.346,2.346,0,0,0,122.343,192Zm1.406,4.217a1.406,1.406,0,0,1-1.406,1.406h-1.406v-4.686h1.406a1.406,1.406,0,0,1,1.406,1.406Zm0,0"
transform="translate(-112.971 -180.754)"
fill="#1e81ce"
/>
<path
d="M220.217,197.623h-3.28v-5.154a.469.469,0,1,0-.937,0v5.623a.469.469,0,0,0,.469.469h3.749a.469.469,0,0,0,0-.937Zm0,0"
transform="translate(-203.349 -180.754)"
fill="#1e81ce"
/>
<path
d="M316.217,197.623h-3.28v-5.154a.469.469,0,1,0-.937,0v5.623a.469.469,0,0,0,.469.469h3.749a.469.469,0,0,0,0-.937Zm0,0"
transform="translate(-293.726 -180.754)"
fill="#1e81ce"
/>
</g>
</svg>
</Btn>

<span>{{ message }}</span>
</div>
</div>

<div class="submission grid col-span-5">
<strong class="uppercase text-gray"> First Submission </strong>
<time class="font-bold">{{ getDateSubmission }}</time>
</div>
</div>
</template>

<script>
import Btn from "@/common/components/elements/button/Btn.vue";
export default {
components: { Btn },
props: {
message: {
default: "A certificate was explicitly revoked by its issuer",
Expand Down Expand Up @@ -209,7 +115,7 @@ export default {
@apply content-center items-center;
.message {
@apply flex text-danger font-bold pl-4;
@apply flex text-danger font-bold;
}
.circle {
@apply p-0 m-0 rounded-full bg-light flex flex-col items-center justify-center content-center;
Expand Down
4 changes: 2 additions & 2 deletions src/common/components/content/PageContent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -140,8 +140,8 @@ export default {
});
},
async refreshContent() {
this.file = await this.getFileSummary;
this.hash = this.file.properties.SHA256;
this.file = await this.getFile;
this.hash = this.file.sha256;
this.downloadLink = `${APP_CONFIGS.apiURL}files/${this.hash}/download/`;
},
},
Expand Down
7 changes: 4 additions & 3 deletions src/common/components/elements/ActivityBlock.vue
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,10 @@
</template>

<script>
import { timeAgoCounts, timeAgo, isAnAVG } from "@/common/functions";
import { followActions, userGetters } from "@/state/helpers";
import { isAnAVG } from "@/common/functions";
import { getClass } from "@/common/classification";
import { followActions, userGetters } from "@/state/helpers";
import { timeAgoCounts, timeAgo } from "@/common/utils/date-format";
import HashInput from "./HashInput.vue";
import FileMeta from "./FileMeta.vue";
Expand Down Expand Up @@ -229,7 +230,7 @@ export default {
}
> * {
@apply py-4 px-6 lg:p-10;
@apply py-4 px-6 lg:p-8;
}
.activity-content {
Expand Down
35 changes: 17 additions & 18 deletions src/common/components/elements/Card.vue
Original file line number Diff line number Diff line change
@@ -1,29 +1,28 @@
<template>
<div class="card">
<h2 class="title" v-if="title">
{{ title }}
</h2>
<slot />
</div>
<div class="card">
<h2 class="title" v-if="title">
{{ title }}
</h2>
<slot />
</div>
</template>

<script>
export default {
props: {
title: {
type: String
}
}
}
props: {
title: {
type: String,
},
},
};
</script>

<style lang="scss" scoped>
.card{
@apply bg-light py-6 px-6 md:rounded-lg shadow-sm content-center items-center;
.card {
@apply bg-light py-3 px-3 md:rounded-lg shadow-sm content-center items-center;
.title{
@apply text-3xl m-4;
}
.title {
@apply text-3xl m-4;
}
}
</style>
13 changes: 10 additions & 3 deletions src/common/components/elements/Logo.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
<template>
<router-link class="text-white no-underline hover:text-white hover:no-underline p-1" to="/">
<img src="@/assets/images/logo.png" class=" h-full max-h-20 w-auto mx-auto p-2" alt="Saferwall">
</router-link>
<router-link
class="text-white no-underline hover:text-white hover:no-underline p-1"
to="/"
>
<img
src="@/assets/images/logo.svg"
class="h-full max-h-20 w-auto mx-auto p-2"
alt="Saferwall"
/>
</router-link>
</template>
8 changes: 4 additions & 4 deletions src/common/components/elements/activity/ShortFollower.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</div>
<div class="actions">
<btn-follow
v-if="notSelfUser"
v-if="!isSelfUser"
:followed="dfollowed"
v-on:toggleFollow="toggleFollow"
/>
Expand All @@ -24,7 +24,7 @@
</template>

<script>
import { timeAgo } from "@/common/functions";
import { timeAgo } from "@/common/utils/date-format";
import { followActions, userGetters } from "@/state/helpers";
import Avatar from "../Avatar.vue";
Expand Down Expand Up @@ -58,8 +58,8 @@ export default {
getRegistredTimeAgo() {
return timeAgo(this.member_since);
},
notSelfUser() {
return this.username !== this.getUser && this.getUser.username;
isSelfUser() {
return this.getUser && this.username === this.getUser.username;
},
},
methods: {
Expand Down
36 changes: 20 additions & 16 deletions src/common/components/elements/button/BtnFollow.vue
Original file line number Diff line number Diff line change
@@ -1,27 +1,31 @@
<template>
<btn :class="followed ? 'btn-active':''" @click="$emit('toggleFollow', $target)">
{{ followed ? 'UnFollow' : 'Follow' }}
</btn>
<btn
:class="followed ? 'btn-active' : ''"
@click="$emit('toggleFollow', $target)"
>
{{ followed ? "UnFollow" : "Follow" }}
</btn>
</template>

<script>
import Btn from './Btn.vue'
import Btn from "./Btn.vue";
export default {
components: {
Btn
},
props : {
followed: {
default: false,
type: Boolean
}
components: {
Btn,
},
props: {
followed: {
default: false,
type: Boolean,
},
emits: [ 'toggleFollow' ]
}
},
emits: ["toggleFollow"],
};
</script>

<style scoped>
.btn-active{
@apply bg-primary bg-opacity-10 border-none font-medium;
.btn-active {
@apply bg-primary bg-opacity-10 border-none font-medium;
}
</style>
Loading

0 comments on commit 5cd7172

Please sign in to comment.