freeleaps_product/freeleaps_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update code formatting

Browse Source
This commit is contained in:
Zhigang Wang 2024-06-07 13:37:43 -07:00
parent 4a5fe9459c
commit 591de12e69
18 changed files with 335 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/App.vue
View File

@ -34,7 +34,10 @@ export default {
margin-top: 0px;
}
.body-header {width: 100%; height: $header-height;}
.body-header {
width: 100%;
height: $header-height;
}
.body-main {
margin-top: 0px;

2
frontend/src/assets/styles/_variables.scss
View File

@ -2,7 +2,7 @@
$shoutout: #f0783b; //for the shoutout texts
// First override some or all individual color variables
$primary: #1748F8; // #0032fd; // #25408f;
$primary: #1748f8; // #0032fd; // #25408f;
// $secondary: #8f5325;
// $success: #3e8d63;
// $info: #13101c;

13
frontend/src/assets/styles/containers.scss
View File

@ -26,6 +26,13 @@
@extend .container-fluid;
@extend .flex-row-box;
}
.flex-1 {flex: 1;}
.flex-all-center {align-items: center; justify-content: center;}
.full-height {height: $body-height;}
.flex-1 {
flex: 1;
}
.flex-all-center {
align-items: center;
justify-content: center;
}
.full-height {
height: $body-height;
}

32
frontend/src/assets/styles/inputs.scss
View File

@ -6,17 +6,39 @@
@extend .form-control;
}
.input-container {width: 460px; height: 62px; border: 2px solid $primary; border-radius: 8px; display: flex; align-items: center; position: relative;
.form-group {width: 100% !important; border: none !important;}
.input-container {
width: 460px;
height: 62px;
border: 2px solid $primary;
border-radius: 8px;
display: flex;
align-items: center;
position: relative;
.form-group {
width: 100% !important;
border: none !important;
}
.input-email {
@extend .input-control-item;
@extend .me-1;
border: none !important; box-shadow: none !important; outline: none !important
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.btn-start {
@extend .proceed-button;
@extend .ms-1;
margin: 8px !important; border-radius: 12px !important; font-weight: 500; font-size: 16px; color: #F8F8F9;
margin: 8px !important;
border-radius: 12px !important;
font-weight: 500;
font-size: 16px;
color: #f8f8f9;
}
.error-msg {
position: absolute;
bottom: -36px;
color: #9ea2af;
font-size: 18px;
margin: 0;
}
.error-msg {position: absolute; bottom: -36px; color: #9EA2AF; font-size: 18px; margin: 0;}
}

16
frontend/src/components/PDFReader.vue
View File

@ -6,7 +6,7 @@
<script>
// import { getDocument } from 'pdfjs-dist'
import * as PDFJS from "pdfjs-dist";
import * as PDFJS from 'pdfjs-dist'
// import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
import { DocumentApi } from '@/utils/index'
// PDFJS.GlobalWorkerOptions.workerSrc = import('pdfjs-dist/build/pdf.worker')
@ -58,18 +58,16 @@ export default {
})
},
base64StringToUint8Array(base64String) {
var padding = '='.repeat((4 - base64String.length % 4) % 4);
var base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/');
var padding = '='.repeat((4 - (base64String.length % 4)) % 4)
var base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/')
var rawData = atob(base64);
var outputArray = new Uint8Array(rawData.length);
var rawData = atob(base64)
var outputArray = new Uint8Array(rawData.length)
for (var i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
outputArray[i] = rawData.charCodeAt(i)
}
return outputArray;
return outputArray
}
}
}

28
frontend/src/components/SvgIcon.vue
View File

@ -6,32 +6,38 @@
<script>
export default {
name: "SvgIcon",
name: 'SvgIcon',
props: {
icon: {
type: String,
required: true,
required: true
},
className: {
type: String,
default: "",
},
default: ''
}
},
computed: {
iconName() {
return `#icon-${this.icon}`;
return `#icon-${this.icon}`
},
svgClass() {
if (this.className) {
return "svg-icon " + this.className;
return 'svg-icon ' + this.className
} else {
return "svg-icon";
return 'svg-icon'
}
}
}
}
},
},
};
</script>
<style scoped>
.svg-icon {width: 1rem; height: 1rem; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}
.svg-icon {
width: 1rem;
height: 1rem;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

28
frontend/src/components/VueQuill.vue
View File

@ -1,14 +1,20 @@
<template>
<div class="vue-quill-container">
<QuillEditor ref="quillRef" v-model:content="quillData" :options="quillOptions" content-type="html" @text-change="quillChange()" />
<QuillEditor
ref="quillRef"
v-model:content="quillData"
:options="quillOptions"
content-type="html"
@text-change="quillChange()"
/>
</div>
</template>
<script>
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
["blockquote", "code-block"],
['blockquote', 'code-block'],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ script: "sub" }, { script: "super" }],
[{ script: 'sub' }, { script: 'super' }],
[{ indent: '-1' }, { indent: '+1' }],
[{ direction: 'rtl' }],
[{ size: ['small', false, 'large', 'huge'] }],
@ -16,7 +22,7 @@ const toolbarOptions = [
[{ color: [] }, { background: [] }],
[{ font: [] }],
[{ align: [] }],
['clean'],
['clean']
]
import { QuillEditor } from '@vueup/vue-quill'
import 'quill/dist/quill.core.css'
@ -24,7 +30,7 @@ import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
name: "VueQuill",
name: 'VueQuill',
props: {
content: {
type: String,
@ -43,7 +49,8 @@ export default {
toolbar: {
container: toolbarOptions
}
}}
}
}
}
},
methods: {
@ -51,10 +58,13 @@ export default {
this.$emit('update:content', this.quillData)
}
}
};
}
</script>
<style>
.vue-quill-container {width: 100%; height: 100%; min-height: 100px;}
.vue-quill-container {
width: 100%;
height: 100%;
min-height: 100px;
}
</style>

15
frontend/src/footers/FooterGuest.vue
View File

@ -24,9 +24,18 @@ export default {
</script>
<style scoped lang="scss">
.bottom-container {height: 110px; align-items: center; justify-content: center;
img {height: 20px; margin-bottom: 10px;}
.bottom-container {
height: 110px;
align-items: center;
justify-content: center;
img {
height: 20px;
margin-bottom: 10px;
}
}
.bottom-text {color: rgba(0,0,0,.5); @extend .fs-6}
.bottom-text {
color: rgba(0, 0, 0, 0.5);
@extend .fs-6;
}
</style>

27
frontend/src/headers/HeaderGuest.vue
View File

@ -39,14 +39,25 @@ export default {
</script>
<style scoped lang="scss">
.header-container {width: 100%; height: 100%; background: white; max-width: 100%;
.header-content {display: flex;align-items: center; justify-content: space-between; height: 100%; max-width: $body-width; width: 100%;
.header-container {
width: 100%;
height: 100%;
background: white;
max-width: 100%;
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: $body-width;
width: 100%;
@extend .flex-row-container;
}
}
.company-logo {height: 40px}
.company-logo {
height: 40px;
}
.company-slogan {
@extend .text-center;
@ -60,11 +71,15 @@ export default {
@extend .align-items-center;
}
.public-sites {display: flex; align-items: center;
.public-sites {
display: flex;
align-items: center;
.public-site-button {
@extend .btn;
@extend .btn-link;
color: black; font-size: 16px; text-decoration: none;
color: black;
font-size: 16px;
text-decoration: none;
}
}
</style>

77
frontend/src/headers/HeaderUser.vue
View File

@ -23,7 +23,13 @@
</button>
</div>
<div class="profile-container">
<img alt="freeleaps logo" data-bs-toggle="dropdown" aria-expanded="false" id="accountButton" src="@/assets/profile.png" />
<img
alt="freeleaps logo"
data-bs-toggle="dropdown"
aria-expanded="false"
id="accountButton"
src="@/assets/profile.png"
/>
<ul class="dropdown-menu" aria-labelledby="accountButton">
<li>
<button class="account-menu-button" @click="gotoProfile">Profile</button>
@ -110,25 +116,72 @@ export default {
</script>
<style scoped lang="scss">
.header-container {width: 100%; height: 100%; background: #F8FAFC; max-width: 100%;
.header-content {display: flex;align-items: center; justify-content: space-between; height: 100%; max-width: $body-width; width: 100%;
.header-container {
width: 100%;
height: 100%;
background: #f8fafc;
max-width: 100%;
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: $body-width;
width: 100%;
@extend .flex-row-container;
}
}
.information-bar {width: 52px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; position: relative; background-color: white;
img {width: 24px; height: 24px;}
&::after {content: ''; display: block; width: 8px; height: 8px; border-radius: 4px; position: absolute; right: 0; top: 0; background-color: #F44837;}
.information-bar {
width: 52px;
height: 36px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: white;
img {
width: 24px;
height: 24px;
}
&::after {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 4px;
position: absolute;
right: 0;
top: 0;
background-color: #f44837;
}
}
.profile-container {position: relative;
img {width: 56px;}
.profile-container {
position: relative;
img {
width: 56px;
}
}
.navigation-container {display: flex; align-items: center; justify-content: center;
.navigation-item {@extend .btn; @extend .btn-link; color: #6E7387; text-decoration: none; margin: 0 30px;
&:hover {color: $primary;}
&.active {color: $primary; font-weight: 500;}
.navigation-container {
display: flex;
align-items: center;
justify-content: center;
.navigation-item {
@extend .btn;
@extend .btn-link;
color: #6e7387;
text-decoration: none;
margin: 0 30px;
&:hover {
color: $primary;
}
&.active {
color: $primary;
font-weight: 500;
}
}
}

4
frontend/src/main.js
View File

@ -38,8 +38,8 @@ app.mixin(userAuthMixin)
app.directive('tooltip', tooltip)
import 'virtual:svg-icons-register'
import SvgIcon from "@/components/SvgIcon.vue";
app.component("svg-icon", SvgIcon);
import SvgIcon from '@/components/SvgIcon.vue'
app.component('svg-icon', SvgIcon)
app.mount('#app')
app.config.warnHandler = (msg, instance, trace) => {

39
frontend/src/pages/guest/FrontDoor.vue
View File

@ -1,7 +1,13 @@
<template>
<div class="flex-colum-container front-container">
<div class="slogen">A platform where our users can find a trustworthy partner, <br/>simplify software development, and secure return.</div>
<div class="poster"><span class="blue">One stop platform</span> for hiring the best <br/>freelance software development talent</div>
<div class="slogen">
A platform where our users can find a trustworthy partner, <br />simplify software
development, and secure return.
</div>
<div class="poster">
<span class="blue">One stop platform</span> for hiring the best <br />freelance software
development talent
</div>
<div class="input-container">
<div class="form-group">
<div class="input-group-container">
@ -15,7 +21,9 @@
/>
<label for="inputEmail">Email address</label>
</div>
<button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">GET STARTED</button>
<button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">
GET STARTED
</button>
</div>
</div>
<p class="error-msg">{{ message }}</p>
@ -80,11 +88,26 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.front-container {padding: 20px 0;
.slogen {font-size: 20px; font-weight: 400; color: rgba(0,0,0,.5); text-align: center; margin-bottom: 24px; line-height: 22px}
.poster {font-size: 48px; font-weight: 500; color: black; text-align: center; margin-bottom: 40px; line-height: 52px;
.blue {color: $primary}
.front-container {
padding: 20px 0;
.slogen {
font-size: 20px;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
text-align: center;
margin-bottom: 24px;
line-height: 22px;
}
.poster {
font-size: 48px;
font-weight: 500;
color: black;
text-align: center;
margin-bottom: 40px;
line-height: 52px;
.blue {
color: $primary;
}
}
}
</style>

3
frontend/src/pages/guest/NewUserSetFlid.vue
View File

@ -81,5 +81,4 @@ export default {
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

4
frontend/src/pages/guest/NewUserSetPassword.vue
View File

@ -93,5 +93,7 @@ export default {
// @extend .proceed-button;
// @extend .ms-1;
// }
.mb-12 {margin-bottom: 12px;}
.mb-12 {
margin-bottom: 12px;
}
</style>

13
frontend/src/pages/guest/SigninWithEmailAndPassword.vue
View File

@ -20,7 +20,9 @@
<div class="error-msg flex-row-container">
<p class="error-p" v-if="message != null">{{ message }}</p>
<div class="flex-1" />
<button type="button" class="btn-forget-password" @click="forgetPassword()">Forget password</button>
<button type="button" class="btn-forget-password" @click="forgetPassword()">
Forget password
</button>
</div>
</div>
</form>
@ -111,11 +113,16 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.error-p {color: #916AD4; margin: 0}
.error-p {
color: #916ad4;
margin: 0;
}
.btn-forget-password {
@extend .btn;
// @extend .ms-1;
@extend .btn-link;
padding: 0; font-size: 16px; margin-left: 15px;
padding: 0;
font-size: 16px;
margin-left: 15px;
}
</style>

2
frontend/vite.config.js
View File

@ -38,7 +38,7 @@ export default defineConfig({
server: {
proxy: {
'^/api/': {
target: 'https://freeleaps-alpha.com',
target: 'https://localhost:8001/',
ws: true,
changeOrigin: true
}