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; margin-top: 0px;
} }
.body-header {width: 100%; height: $header-height;} .body-header {
width: 100%;
height: $header-height;
}
.body-main { .body-main {
margin-top: 0px; margin-top: 0px;

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

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

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

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

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

@ -6,17 +6,39 @@
@extend .form-control; @extend .form-control;
} }
.input-container {width: 460px; height: 62px; border: 2px solid $primary; border-radius: 8px; display: flex; align-items: center; position: relative; .input-container {
.form-group {width: 100% !important; border: none !important;} 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 { .input-email {
@extend .input-control-item; @extend .input-control-item;
@extend .me-1; @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 { .btn-start {
@extend .proceed-button; @extend .proceed-button;
@extend .ms-1; @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;
}
}

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

@ -6,7 +6,7 @@
<script> <script>
// import { getDocument } from 'pdfjs-dist' // 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 pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
import { DocumentApi } from '@/utils/index' import { DocumentApi } from '@/utils/index'
// PDFJS.GlobalWorkerOptions.workerSrc = import('pdfjs-dist/build/pdf.worker') // PDFJS.GlobalWorkerOptions.workerSrc = import('pdfjs-dist/build/pdf.worker')
@ -14,36 +14,36 @@ import { DocumentApi } from '@/utils/index'
export default { export default {
name: 'PDFReader', name: 'PDFReader',
props: { props: {
document: {type: String, default: ''} document: { type: String, default: '' }
}, },
mounted () { mounted() {
this.renderPDF() this.renderPDF()
}, },
methods: { methods: {
async renderPDF () { async renderPDF() {
const response = await DocumentApi.download(this.document) const response = await DocumentApi.download(this.document)
// const response = await ContentApi.retrieve_blog_content(this.document) // const response = await ContentApi.retrieve_blog_content(this.document)
console.log('response', response) console.log('response', response)
// var fr = new FileReader(); // var fr = new FileReader();
// fr.onload = async function(){ // fr.onload = async function(){
// const doc = await getDocument({url: this.result}).promise // const doc = await getDocument({url: this.result}).promise
// const page = await doc.getPage(1) // const page = await doc.getPage(1)
// const canvas = this.$refs.canvas // const canvas = this.$refs.canvas
// const context = canvas.getContext('2d') // const context = canvas.getContext('2d')
// const viewport = page.getViewport({ scale: 1 }) // const viewport = page.getViewport({ scale: 1 })
// canvas.width = viewport.width // canvas.width = viewport.width
// canvas.height = viewport.height // canvas.height = viewport.height
// await page.render({ // await page.render({
// canvasContext: context, // canvasContext: context,
// viewport // viewport
// }) // })
// } // }
// fr.readAsDataURL(response.data); // fr.readAsDataURL(response.data);
const doc = await PDFJS.getDocument({data: response.data}).promise const doc = await PDFJS.getDocument({ data: response.data }).promise
const page = await doc.getPage(1) const page = await doc.getPage(1)
const canvas = this.$refs.canvas const canvas = this.$refs.canvas
const context = canvas.getContext('2d') const context = canvas.getContext('2d')
@ -58,18 +58,16 @@ export default {
}) })
}, },
base64StringToUint8Array(base64String) { base64StringToUint8Array(base64String) {
var padding = '='.repeat((4 - base64String.length % 4) % 4); var padding = '='.repeat((4 - (base64String.length % 4)) % 4)
var base64 = (base64String + padding) var base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/')
.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)
for (var i = 0; i < rawData.length; ++i) { }
outputArray[i] = rawData.charCodeAt(i); return outputArray
}
return outputArray;
} }
} }
} }

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

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

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

@ -1,22 +1,28 @@
<template> <template>
<div class="vue-quill-container"> <div class="vue-quill-container">
<QuillEditor ref="quillRef" v-model:content="quillData" :options="quillOptions" content-type="html" @text-change="quillChange()" /> <QuillEditor
</div> ref="quillRef"
v-model:content="quillData"
:options="quillOptions"
content-type="html"
@text-change="quillChange()"
/>
</div>
</template> </template>
<script> <script>
const toolbarOptions = [ const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], ['bold', 'italic', 'underline', 'strike'],
["blockquote", "code-block"], ['blockquote', 'code-block'],
[{ list: 'ordered' }, { list: 'bullet' }], [{ list: 'ordered' }, { list: 'bullet' }],
[{ script: "sub" }, { script: "super" }], [{ script: 'sub' }, { script: 'super' }],
[{ indent: '-1' }, { indent: '+1' }], [{ indent: '-1' }, { indent: '+1' }],
[{ direction: 'rtl' }], [{ direction: 'rtl' }],
[{ size: ['small', false, 'large', 'huge'] }], [{ size: ['small', false, 'large', 'huge'] }],
[{ header: [1, 2, 3, 4, 5, 6, false] }], [{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], [{ color: [] }, { background: [] }],
[{ font: [] }], [{ font: [] }],
[{ align: [] }], [{ align: [] }],
['clean'], ['clean']
] ]
import { QuillEditor } from '@vueup/vue-quill' import { QuillEditor } from '@vueup/vue-quill'
import 'quill/dist/quill.core.css' import 'quill/dist/quill.core.css'
@ -24,37 +30,41 @@ import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css' import 'quill/dist/quill.bubble.css'
export default { export default {
name: "VueQuill", name: 'VueQuill',
props: { props: {
content: { content: {
type: String, type: String,
default: '' default: ''
}
},
emits: ['update:content'],
components: { QuillEditor },
data() {
return {
quillData: this.content,
quillOptions: {
theme: 'snow',
placeholder: '请输入',
modules: {
toolbar: {
container: toolbarOptions
}
}}
}
},
methods: {
quillChange() {
this.$emit('update:content', this.quillData)
}
} }
}; },
emits: ['update:content'],
components: { QuillEditor },
data() {
return {
quillData: this.content,
quillOptions: {
theme: 'snow',
placeholder: '请输入',
modules: {
toolbar: {
container: toolbarOptions
}
}
}
}
},
methods: {
quillChange() {
this.$emit('update:content', this.quillData)
}
}
}
</script> </script>
<style> <style>
.vue-quill-container {width: 100%; height: 100%; min-height: 100px;} .vue-quill-container {
</style> width: 100%;
height: 100%;
min-height: 100px;
}
</style>

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

@ -24,9 +24,18 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.bottom-container {height: 110px; align-items: center; justify-content: center; .bottom-container {
img {height: 20px; margin-bottom: 10px;} 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> </style>

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

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

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

@ -23,7 +23,13 @@
</button> </button>
</div> </div>
<div class="profile-container"> <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"> <ul class="dropdown-menu" aria-labelledby="accountButton">
<li> <li>
<button class="account-menu-button" @click="gotoProfile">Profile</button> <button class="account-menu-button" @click="gotoProfile">Profile</button>
@ -110,25 +116,72 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.header-container {width: 100%; height: 100%; background: #F8FAFC; max-width: 100%; .header-container {
.header-content {display: flex;align-items: center; justify-content: space-between; height: 100%; max-width: $body-width; width: 100%; 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; @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; .information-bar {
img {width: 24px; height: 24px;} width: 52px;
&::after {content: ''; display: block; width: 8px; height: 8px; border-radius: 4px; position: absolute; right: 0; top: 0; background-color: #F44837;} 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; .profile-container {
img {width: 56px;} position: relative;
img {
width: 56px;
}
} }
.navigation-container {display: flex; align-items: center; justify-content: center; .navigation-container {
.navigation-item {@extend .btn; @extend .btn-link; color: #6E7387; text-decoration: none; margin: 0 30px; display: flex;
&:hover {color: $primary;} align-items: center;
&.active {color: $primary; font-weight: 500;} 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) app.directive('tooltip', tooltip)
import 'virtual:svg-icons-register' import 'virtual:svg-icons-register'
import SvgIcon from "@/components/SvgIcon.vue"; import SvgIcon from '@/components/SvgIcon.vue'
app.component("svg-icon", SvgIcon); app.component('svg-icon', SvgIcon)
app.mount('#app') app.mount('#app')
app.config.warnHandler = (msg, instance, trace) => { app.config.warnHandler = (msg, instance, trace) => {

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

@ -1,23 +1,31 @@
<template> <template>
<div class="flex-colum-container front-container"> <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="slogen">
<div class="poster"><span class="blue">One stop platform</span> for hiring the best <br/>freelance software development talent</div> 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="input-container">
<div class="form-group"> <div class="form-group">
<div class="input-group-container"> <div class="input-group-container">
<div class="form-floating"> <div class="form-floating">
<input <input
class="input-email" class="input-email"
id="inputEmail" id="inputEmail"
type="text" type="text"
placeholder="name@example.com" placeholder="name@example.com"
v-model="email" v-model="email"
/> />
<label for="inputEmail">Email address</label> <label for="inputEmail">Email address</label>
</div>
<button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">GET STARTED</button>
</div> </div>
<button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">
GET STARTED
</button>
</div> </div>
</div>
<p class="error-msg">{{ message }}</p> <p class="error-msg">{{ message }}</p>
</div> </div>
</div> </div>
@ -80,11 +88,26 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
.front-container {padding: 20px 0; .front-container {
.slogen {font-size: 20px; font-weight: 400; color: rgba(0,0,0,.5); text-align: center; margin-bottom: 24px; line-height: 22px} padding: 20px 0;
.poster {font-size: 48px; font-weight: 500; color: black; text-align: center; margin-bottom: 40px; line-height: 52px; .slogen {
.blue {color: $primary} 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> </style>

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

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

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

@ -19,18 +19,18 @@
</div> </div>
<div class="input-container"> <div class="input-container">
<div class="input-group-container"> <div class="input-group-container">
<div class="form-floating"> <div class="form-floating">
<input <input
class="input-email" class="input-email"
id="inputCode" id="inputCode"
type="password" type="password"
:placeholder="'Repeat your password'" :placeholder="'Repeat your password'"
v-model="password2" v-model="password2"
/> />
<label for="inputCode">Repeat password</label> <label for="inputCode">Repeat password</label>
</div>
<button type="submit" class="btn-start">SIGN UP</button>
</div> </div>
<button type="submit" class="btn-start">SIGN UP</button>
</div>
<p class="errorInput" v-if="message != null">{{ message }}</p> <p class="errorInput" v-if="message != null">{{ message }}</p>
</div> </div>
</form> </form>
@ -93,5 +93,7 @@ export default {
// @extend .proceed-button; // @extend .proceed-button;
// @extend .ms-1; // @extend .ms-1;
// } // }
.mb-12 {margin-bottom: 12px;} .mb-12 {
margin-bottom: 12px;
}
</style> </style>

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

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

2
frontend/src/pages/public/PdfContentViewer.vue
View File

@ -16,7 +16,7 @@ export default {
type: String type: String
} }
}, },
components: {PDFReader}, components: { PDFReader },
computed: {}, computed: {},
mounted() { mounted() {
// this.retrieve_blog_content() // this.retrieve_blog_content()

2
frontend/src/pages/user/workspace/requestIssue/Issue.vue
View File

@ -185,7 +185,7 @@ export default {
type: String type: String
} }
}, },
components: {VueQuill}, components: { VueQuill },
mounted() { mounted() {
this.initProducts() this.initProducts()
this.initiateFromInput() this.initiateFromInput()

2
frontend/vite.config.js
View File

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