forked from geolba/tethys.frontend
- add font awesome
- add custom page styling
This commit is contained in:
parent
315f845292
commit
a4e8ee6f2e
1243
package-lock.json
generated
1243
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
@ -3,12 +3,15 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve --port 3000",
|
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --port 3000",
|
||||||
"build": "vue-cli-service build",
|
"build": "vue-cli-service build",
|
||||||
"lint": "vue-cli-service lint",
|
"lint": "vue-cli-service lint",
|
||||||
"format": "prettier --write 'src/**/*.{ts,tsx}'"
|
"format": "prettier --write 'src/**/*.{ts,tsx}'"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||||
|
"@fortawesome/vue-fontawesome": "^3.0.0-5",
|
||||||
"@openfonts/open-sans_all": "^1.44.2",
|
"@openfonts/open-sans_all": "^1.44.2",
|
||||||
"axios": "^0.24.0",
|
"axios": "^0.24.0",
|
||||||
"class-transformer": "^0.4.0",
|
"class-transformer": "^0.4.0",
|
||||||
|
|
68
src/App.vue
68
src/App.vue
|
@ -1,6 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- <HelloWorld msg="Welcome to Your Vue.js plus TypeScript App" /> -->
|
<!-- <HelloWorld msg="Welcome to Your Vue.js plus TypeScript App" /> -->
|
||||||
|
|
||||||
|
<!-- <link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
|
||||||
|
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
/> -->
|
||||||
<nav class="navbar navbar-light border-bottom" role="navigation" aria-label="main navigation">
|
<nav class="navbar navbar-light border-bottom" role="navigation" aria-label="main navigation">
|
||||||
<div class="navbar-brand">
|
<div class="navbar-brand">
|
||||||
<a class="navbar-item" href="#">
|
<a class="navbar-item" href="#">
|
||||||
|
@ -39,10 +45,11 @@
|
||||||
<div class="navbar-end">
|
<div class="navbar-end">
|
||||||
<div class="navbar-item">
|
<div class="navbar-item">
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<a class="button is-primary">
|
<a class="button is-primary custom-button">
|
||||||
<span class="icon is-small">
|
<!-- <span class="icon is-small"> -->
|
||||||
<i class="fas fa-align-left"></i>
|
<!-- <i class="fas fa-sign-in-alt"></i> -->
|
||||||
</span>
|
<fa :icon="['fas', 'phone']" class="fas fa-sign-in-alt" />
|
||||||
|
<!-- </span> -->
|
||||||
<strong>Sign in</strong>
|
<strong>Sign in</strong>
|
||||||
</a>
|
</a>
|
||||||
<!-- <a class="button is-light"> Log in </a> -->
|
<!-- <a class="button is-light"> Log in </a> -->
|
||||||
|
@ -78,16 +85,59 @@
|
||||||
<hr class="center-line" />
|
<hr class="center-line" />
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="column header-image align-items-center h-100">
|
<div class="column">
|
||||||
<!-- <div class="col mt-3 mx-auto">
|
<div class="col text-center py-3">
|
||||||
|
<h1>Tethys Research Data Repository</h1>
|
||||||
|
<p class="lead">Data Publisher for Geoscience Austria</p>
|
||||||
|
<hr class="center-line" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="column header-image align-items-center h-100">
|
||||||
|
<div class="col mt-3 mx-auto">
|
||||||
<div class="search-box mx-auto">
|
<div class="search-box mx-auto">
|
||||||
<form class="my-2 my-lg-0 main-search-from-bg d-flex d-row">
|
<form class="my-2 my-lg-0 main-search-from-bg d-flex d-row">
|
||||||
<input class="form-control mr-sm-2 border-0" type="text" placeholder="Search" aria-label="Search" />
|
<input class="form-control mr-sm-2 border-0" type="text" placeholder="Search" aria-label="Search" />
|
||||||
<button class="btn btn-secondary m-0" type="submit"><i class="fas fa-search text-white"></i></button>
|
<button class="btn btn-secondary m-0" type="submit"><i class="fas fa-search text-white"></i></button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
<!-- <figure class="image is-128x128">
|
||||||
|
<img src="https://bulma.io/images/placeholders/256x256.png" />
|
||||||
|
</figure> -->
|
||||||
|
<section data-sr id="help" class="help u-full-width featured-bg-image"></section>
|
||||||
|
|
||||||
|
<!-- <div class="columns">
|
||||||
|
<div class="column text-center">
|
||||||
|
<h1>ÜBER TETHYS</h1>
|
||||||
|
<p class="lead">Was sind unsere Schwerpunkte</p>
|
||||||
|
<hr class="center-line" />
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="column is-full text-center">
|
||||||
|
<h1>ÜBER TETHYS</h1>
|
||||||
|
<p class="lead">Was sind unsere Schwerpunkte</p>
|
||||||
|
<hr class="center-line" />
|
||||||
|
</div>
|
||||||
|
<div class="column is-full text-left">
|
||||||
|
<p>
|
||||||
|
TETHYS RDR ist ein publizierendes Forschungsdatenrepositorium der Geologischen Bundesanstalt (GBA), das an der GBA generierte geowisse nschaftliche
|
||||||
|
Forschungsdaten veröffentlicht.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Zum derzeitigen Stand wird TETHYS RDR in deutscher Sprache bereitgestellt. Die englische Version befindet sich in Vorbereitung und wird sukzessive ebenfalls zur
|
||||||
|
Verfügung gestellt. Die Forschungsdatenpublikationen und die dazugehörigen Metadaten können in Deutsch und in Englisch veröffentlicht werden. Tethys RDR hat den
|
||||||
|
Anspruch, publizierte Datensätze unverändert, langfristig und nachhaltig bereitzustellen. Dadurch ist Tethys ein Forschungsdatenrepositorium, das ein
|
||||||
|
permanentes Referenzieren ermöglicht und somit die darin publizierten Datensätze zitierfähig macht.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Der Name Tethys kommt ursprünglich aus der griechischen Mythologie und benennt eine Titanin und Meeresgöttin. Ende des 19. Jahrhunderts entdeckte Eduard Suess
|
||||||
|
(1831–1914), ein bedeutender österreichischer Geologe, den mesozoischen Ozean und benannte ihn nach dieser Tethys.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
|
<vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
|
||||||
|
|
||||||
|
@ -253,7 +303,7 @@ export default App;
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
margin-top: 5px;
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -16,9 +16,30 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
&.custom-button {
|
||||||
|
// display: block;
|
||||||
|
|
||||||
|
width: 125px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.9em;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
.fas {
|
||||||
|
margin-right: 0.6em;
|
||||||
|
// border-right: 1px solid #fff;
|
||||||
|
width: 2em;
|
||||||
|
};
|
||||||
|
strong {
|
||||||
|
border-left: 1px solid #fff;
|
||||||
|
padding-left: 0.6em;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.header-image {
|
.header-image {
|
||||||
background-image: url("./../site/img/Main-banner-homepage-xl.jpg");
|
background-image: url("./../site/img/Main-banner-homepage-xl.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
@ -35,7 +56,98 @@
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* =Section general styling
|
||||||
|
-------- */
|
||||||
|
// section {
|
||||||
|
// text-align: center;
|
||||||
|
// padding: 60px 0 0 0;
|
||||||
|
// }
|
||||||
|
// section.normal {
|
||||||
|
// text-align: left;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .content-container {
|
||||||
|
// margin-top: 25px;
|
||||||
|
// }
|
||||||
|
// /*
|
||||||
|
|
||||||
|
|
||||||
|
.help:before {
|
||||||
|
background: url("./../site/img/Main-banner-homepage-xl.jpg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-bg-image {
|
||||||
|
position: relative;
|
||||||
|
/* background-color: #222222; */
|
||||||
|
background-color: gray;
|
||||||
|
color: white;
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
.featured-bg-image:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
// opacity: .35;
|
||||||
|
|
||||||
|
// background-size: cover;
|
||||||
|
// background-position: top center;
|
||||||
|
// background-repeat: no-repeat;
|
||||||
|
min-height: 562px;
|
||||||
|
}
|
||||||
|
/* Utilities
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
.u-full-width {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.text-center {
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
.py-3 {
|
||||||
|
padding-top: 1rem !important;
|
||||||
|
padding-bottom: 1rem !important;
|
||||||
|
}
|
||||||
|
hr.center-line {
|
||||||
|
background: #33cccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr.center-line {
|
||||||
|
border: 0;
|
||||||
|
height: 3px;
|
||||||
|
width: 185px;
|
||||||
|
position: relative;
|
||||||
|
margin: 1.65em auto;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
body H1 {
|
||||||
|
font-family: Verdana;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.6em;
|
||||||
|
line-height: 1.75em;
|
||||||
|
}
|
||||||
|
.lead {
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
// font-family: Verdana;
|
||||||
|
color: #495057;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-4 {
|
||||||
|
margin-top: 1.5rem !important;
|
||||||
|
}
|
||||||
|
.text-left {
|
||||||
|
text-align: left!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -247,8 +359,6 @@ svg,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
padding-top: 0.5rem;
|
padding-top: 0.5rem;
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
|
@ -283,4 +393,3 @@ svg,
|
||||||
.navbar-item img {
|
.navbar-item img {
|
||||||
max-height: 6rem;
|
max-height: 6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { createApp } from "vue";
|
import { createApp } from "vue";
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
import "./assets/scss/main-styles.scss";
|
import "./assets/scss/main-styles.scss";
|
||||||
|
import FontAwesomeIcon from "@/utilities/fontawesome";
|
||||||
|
|
||||||
createApp(App).mount("#app");
|
createApp(App).component("fa", FontAwesomeIcon).mount("#app");
|
||||||
|
|
|
@ -42,4 +42,9 @@ vue inspect > out.js
|
||||||
|
|
||||||
npm install --save qs
|
npm install --save qs
|
||||||
|
|
||||||
npm install --save class-transformer
|
npm install --save class-transformer
|
||||||
|
|
||||||
|
|
||||||
|
npm install --save @fortawesome/vue-fontawesome@prerelease
|
||||||
|
npm install --save @fortawesome/fontawesome-svg-core
|
||||||
|
npm install --save @fortawesome/free-solid-svg-icons
|
14
src/utilities/fontawesome.ts
Normal file
14
src/utilities/fontawesome.ts
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||||
|
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||||
|
import { faPhone } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
// import { faUser } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { faFlag, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
|
||||||
|
// https://stackoverflow.com/questions/66389974/using-font-awesome-in-vue-3
|
||||||
|
library.add(faSignInAlt);
|
||||||
|
library.add(faFlag);
|
||||||
|
library.add(faPhone);
|
||||||
|
// import { dom } from "@fortawesome/fontawesome-svg-core";
|
||||||
|
// dom.watch();
|
||||||
|
|
||||||
|
export default FontAwesomeIcon;
|
Loading…
Reference in New Issue
Block a user