ydeng/props
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Worked on content for home page.

Browse Source
This commit is contained in:
Harrison Deng 2021-07-12 20:00:17 -05:00
parent b62b85fccb
commit cefd02f202
12 changed files with 237 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
MultiShop/client/package-lock.json generated
View File

@ -1233,6 +1233,11 @@
}
}
},
"@juggle/resize-observer": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz",
"integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw=="
},
"@mrmlnc/readdir-enhanced": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@ -4677,6 +4682,11 @@
}
}
},
"can-use-dom": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz",
"integrity": "sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo="
},
"caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@ -11153,8 +11163,7 @@
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
"dev": true
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
},
"lodash.defaults": {
"version": "4.2.0",
@ -11213,8 +11222,7 @@
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
"dev": true
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
},
"lodash.merge": {
"version": "4.6.2",
@ -11253,6 +11261,11 @@
"lodash._reinterpolate": "^3.0.0"
}
},
"lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
},
"lodash.transform": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
@ -15296,6 +15309,28 @@
}
}
},
"simplebar": {
"version": "5.3.4",
"resolved": "https://registry.npmjs.org/simplebar/-/simplebar-5.3.4.tgz",
"integrity": "sha512-2mCaVdiroCKmXuD+Qfy+QSE32m5BMuZ4ssHvRD1QEPYH95Re/kox7j/Wy0Hje8Uo7LY7O6JK3XSNJmesGlsP8Q==",
"requires": {
"@juggle/resize-observer": "^3.3.1",
"can-use-dom": "^0.1.0",
"core-js": "^3.0.1",
"lodash.debounce": "^4.0.8",
"lodash.memoize": "^4.1.2",
"lodash.throttle": "^4.1.1"
}
},
"simplebar-vue": {
"version": "1.6.6",
"resolved": "https://registry.npmjs.org/simplebar-vue/-/simplebar-vue-1.6.6.tgz",
"integrity": "sha512-rtS9HC5KSVj8eMp37DxCldtihf7gECvLD3iE/iHfnG34I5kU1puERE51cpLJZV3PxcsKg5AIMdd5irGRCb88Qw==",
"requires": {
"core-js": "^3.0.1",
"simplebar": "^5.3.4"
}
},
"slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",

3
MultiShop/client/src/App.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="content" class="theme-light">
<div id="app-content" class="theme-light">
<nav class="navbar" id="nav">
<div class="container-fluid">
<router-link class="navbar-brand" to="/">Props</router-link>
@ -57,7 +57,6 @@
<script>
import "bootstrap/js/dist/collapse";
import "./assets/scss/main.scss";
import ProfileDisplay from "./components/ProfileDisplay.vue";
import ProfileLogIn from "./components/ProfileLogIn.vue";
import ProfileLogOut from "./components/ProfileLogOut.vue";

7
MultiShop/client/src/assets/scss/_app-layout.scss
View File

@ -1,10 +1,9 @@
// Used to provide inial layout for application containing elements.
html, body, #app, #content {
min-height: 100%;
height: 100%;
html, body, #app, #app-content {
min-height: 100vh;
}
#content {
#app-content {
display: flex;
flex-direction: column;
}

2
MultiShop/client/src/assets/scss/_variables.scss
View File

@ -1,3 +1,3 @@
$themes: (
"light": ("background": #F4F4F4, "navbar": #FFF7F7, "main": #BDF2D5, "text": #1A1A1A),
"light": ("background": #F4F4F4, "navbar": #FFF7F7, "main": #BDF2D5, "sub": #F2FCFC, "bold": #1E56A0, "text": #1A1A1A),
);

35
MultiShop/client/src/assets/scss/main.scss
View File

@ -1,10 +1,16 @@
@use "app-layout";
@use "themer";
@use "../../../node_modules/bootstrap/scss/bootstrap";
@import "../../../node_modules/bootstrap-icons/font/bootstrap-icons.css";
#app-content {
@include themer.themed {
background-color: themer.color-of("background");
color: themer.color-of("text");
}
}
nav.navbar {
@extend .navbar-expand-lg;
@extend .sticky-top;
@include themer.themed {
@extend .navbar-light;
background-color: themer.color-of("navbar");
@ -17,11 +23,26 @@ nav.navbar {
@include themer.themed {
background-color: themer.color-of("main");
}
}
#content {
@include themer.themed {
background-color: themer.color-of("background");
color: themer.color-of("text");
&.sub {
@include themer.themed {
background-color: themer.color-of("sub");
}
}
}
h1 {
font-size: 5em;
}
h2 {
font-size: 3em;
}
hr {
@extend .my-3;
@include themer.themed {
color: themer.color-of("bold");
}
}

19
MultiShop/client/src/components/InfoCard.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div class="card">
<div class="card-body">
<h5 class="card-title"><slot name="title">Title</slot></h5>
<h6 class="card-subtitle mb-3 text-muted">
<slot name="subtitle">Subtitle</slot>
</h6>
<p class="card-text">
<slot name="text"> </slot>
</p>
</div>
</div>
</template>
<script>
export default {
name: "InfoCard"
};
</script>

2
MultiShop/client/src/components/SearchBar.vue
View File

@ -4,7 +4,7 @@
<input type="text" class="form-control" :placeholder="placeholder" v-model="query" @keyup.enter="onEnter">
<slot name="append"></slot>
<button class="btn btn-outline-primary" type="button" @click="onClick">
<i class="bi bi-search"></i>
Search
</button>
</div>
</form>

4
MultiShop/client/src/main.js
View File

@ -3,7 +3,9 @@ import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import "./assets/scss/main.scss";
import "../node_modules/bootstrap-icons/font/bootstrap-icons.css";
import "./assets/scss/main.scss"; // Main global scss file.
const app = createApp(App);

10
MultiShop/client/src/services/http.js
View File

@ -2,13 +2,13 @@ import axios from "axios";
let currentAuthorizationInterceptorID = null;
const http = axios.create({
const apiHttp = axios.create({
baseURL: window.location.origin + "/api",
timeout: 2000,
timeout: 3000,
});
function addBearerTokenInterceptor(token) {
currentAuthorizationInterceptorID = http.interceptors.request.use((config) => {
currentAuthorizationInterceptorID = apiHttp.interceptors.request.use((config) => {
config.headers.Authorization = `Bearer ${token}`;
return config;
}, (err) => {
@ -17,7 +17,7 @@ function addBearerTokenInterceptor(token) {
}
function removeBearerTokenInterceptor() {
http.interceptors.request.eject(currentAuthorizationInterceptorID);
apiHttp.interceptors.request.eject(currentAuthorizationInterceptorID);
}
export { http, addBearerTokenInterceptor, removeBearerTokenInterceptor };
export { apiHttp, addBearerTokenInterceptor, removeBearerTokenInterceptor };

4
MultiShop/client/src/store/identity.js
View File

@ -1,6 +1,6 @@
import router from "../router";
import { identityPaths, identityQueryParameters, userManager } from "../services/authentication";
import { addBearerTokenInterceptor, http, removeBearerTokenInterceptor } from "../services/http";
import { addBearerTokenInterceptor, apiHttp, removeBearerTokenInterceptor } from "../services/http";
import { get, put } from "../services/persistence";
const identity = {
@ -116,7 +116,7 @@ const identity = {
},
async updatePublicApiSettings(context) {
try {
const settings = (await http.get("PublicApiSettings")).data;
const settings = (await apiHttp.get("PublicApiSettings")).data;
if (settings.RegistrationEnabled === "True") {
context.commit("enableIdentificationRegistration");
} else {

134
MultiShop/client/src/views/Home.vue
View File

@ -2,6 +2,7 @@
<div id="main" class="jumbotron d-flex flex-column align-items-center">
<div>
<img
id="large-logo"
alt="SHAID logo"
src="../assets/images/logo.svg"
class="img-fluid"
@ -10,31 +11,146 @@
<div id="description" class="text-center px-3 my-2">
<h1 class="my-2">Props</h1>
<p>
Props is a site designed to help with the online project
component shopping experience. Create project component lists
and search across multiple commonly used online retail stores to
find the ideal purchase.
{{ content?.description }}
</p>
</div>
</div>
<div class="jumbotron sub">
<div
id="help"
class="container d-flex flex-column align-items-center my-3"
>
<div class="large"><i class="bi bi-search"></i></div>
<h2 class="mb-3 mt-4">{{ content?.help.title }}</h2>
<SearchBar
id="searchbar"
placeholder="Search here to get started!"
class="my-4"
style="width: 100%;"
></SearchBar>
<p>
{{ content?.help.searchIntroduction }}
</p>
<p>
{{ content?.help.additionalInfo }}
</p>
</div>
</div>
<div
id="features"
class="container d-flex flex-column align-items-center my-3"
>
<h2 class="mb-3 mt-4">Features</h2>
<p>
{{ content?.features.description }}
</p>
<div class="overflow-auto">
<div v-if="content" class="row my-2">
<InfoCard
v-for="feature in content.features.list"
v-bind:key="feature"
style="width: 32rem"
>
<template v-slot:title>{{ feature.title }}</template>
<template v-slot:subtitle>{{ feature.subtitle }}</template>
<template v-slot:text>{{ feature.text }}</template>
</InfoCard>
</div>
</div>
</div>
</template>
<script>
import InfoCard from "../components/InfoCard.vue";
import SearchBar from "../components/SearchBar.vue";
export default {
name: "Home",
components: {}
components: {
InfoCard,
SearchBar
},
data() {
return {
content: {
description:
"Props is a site designed to help with the online project component shopping experience. Create project component lists and search across multiple commonly used online retail stores to find the ideal purchase.",
help: {
title: "Getting Started",
searchIntroduction:
"Props is a site designed to help with the online project component shopping experience. Create project component lists and search across multiple commonly used online retail stores to find the ideal purchase.",
additionalInfo:
"Take advantage of our project component manager, where you can add detailed descriptions of what things are for, as well as overall project summaries."
},
features: {
description:
"Props strives to be a platform where people can find and organize the material they need to complete their projects. Our features are therefore tailored to the community helping each other, as well as smart tools to quickly compare different products from different stores.",
list: [
{
title: "Shopping List",
subtitle: "We'll do it so you don't need to.",
text:
"We'll help you track the components you need. You can add descriptions, and mark things as purchased, or shipped at your convenience. You can even add components from stores that Props doesn't know about yet!"
},
{
title: "Product Comparison",
subtitle: "So many shops to look through...",
text:
"There's so many online retailers nowadays that it's becoming more and more work to check all of them for what you need. With us, we'll do the searching for you. All you need to do is decide if the shipping time, cost, ratings and reviews are suitable!"
},
{
title: "Auto Listing Search",
subtitle: "Need a starting point?",
text:
"Some project parts commonly used. We'll try and find these parts for you automatically. This means you can create a shopping list, and we'll try and the best fitting products for you based on your shopping list entries."
},
{
title: "Share It!",
subtitle: "Show off your work!",
text:
"Have a project that you're excited about? Want to tell all your friends? We'll help. Each of your projects has a privacy setting. You can have it publically listed, unlisted, or completely private. Short link included."
}
]
}
}
};
}
};
</script>
<style lang="scss" scoped>
h1 {
font-size: 5em;
#large-logo {
max-height: 270px;
}
.overflow-auto {
max-width: 100%;
}
.row {
flex-wrap: nowrap;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.card {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
#help {
max-width: 810px;
margin-left: auto;
margin-right: auto;
}
#description {
max-width: 540px;
}
.img-fluid {
max-height: 450px;
.large {
.bi {
font-size: 5em;
}
}
</style>

12
MultiShop/client/vue.config.js
View File

@ -1 +1,11 @@
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
@use "@/assets/scss/_themer.scss";
`
}
}
}
};