Not really sure what is going on, have not done a commit in a while.

I assume this is all the metric tracking changes.
Looks like some script changes as well.
This commit is contained in:
Max
2023-02-12 18:41:55 +00:00
parent 48c1fa8e69
commit 39e153b8e1
15 changed files with 303 additions and 1480 deletions

View File

@@ -146,6 +146,9 @@ body {
.ui.dividing.header {
border-bottom-color: var(--dark_border_color);
}
.ui.dividing.header > .sub.header {
color: var(--dark_border_color);
}
.ui.icon.input > i.icon {
color: var(--text_color);
}
@@ -180,10 +183,15 @@ i.green.icon.icon.icon.icon, i.green.icon.icon.icon.icon.icon {
.button {
box-shadow: 2px 2px 4px -2px rgba(40, 40, 40, 0.89) !important;
transition: all 0.9s ease;
position: relative;
}
.button:hover {
box-shadow: 3px 2px 5px -2px rgba(40, 40, 40, 0.95) !important;
box-shadow: 3px 2px 3px -2px rgba(40, 40, 40, 0.95) !important;
}
.button:active {
transform: translateY(1px);
}
.ui.green.buttons, .ui.green.button, .ui.green.button:hover {
background-color: var(--main-accent);
}

View File

@@ -15,7 +15,7 @@
box-sizing: border-box;
display: block;
position: fixed;
z-index: 111;
z-index: 900;
top: 0;
left: 0;
bottom: 0;
@@ -66,7 +66,7 @@
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 100;
z-index: 899;
cursor: pointer;
}
.top-menu-bar {
@@ -526,8 +526,11 @@
location.reload(true)
},
getVersionIcon(){
if(!this.version){
return 'radiation alternate'
}
const icons = ['cat','crow','dog','dove','dragon','fish','frog','hippo','horse','kiwi bird','otter','spider', 'smile', 'robot', 'hat wizard', 'microchip', 'atom', 'grin tongue squint', 'radiation', 'ghost', 'dna', 'burn', 'brain', 'moon', 'torii gate']
const index = ( parseInt(this.version.replace(/\./g,'')) % (icons.length))
const index = ( parseInt(String(this.version).replace(/\./g,'')) % (icons.length))
return icons[index]
}

View File

@@ -0,0 +1,164 @@
<style type="text/css" scoped>
.modal-content {
position: fixed;
top: 40%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -40%);
z-index: 300;
padding: 1em;
box-sizing: border-box;
width: 50%;
max-height: 100%;
/*overflow: hidden;*/
overflow-y: scroll;
font-weight: normal;
}
.modal-content.fullscreen {
width: 96%;
height: 100%;
max-height: 100%;
}
.close-container {
position: fixed;
top: 5px;
right: 5px;
z-index: 320;
}
/* Shrink button text for mobile */
@media only screen and (max-width: 740px) {
.modal-content {
width: 100%;
padding-bottom: 55px;
}
}
.modal-content.right-side {
width: 60%;
max-height: none;
height: 100vh;
padding: 0;
margin: 0;
top: 0;
bottom: 0;
left: 0;
left: auto;
transform: translate(0, 0);
}
.close-container-right-side {
position: fixed;
top: 5px;
left: calc(60% + 2px);
z-index: 320;
}
.shade {
position: fixed;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #0000007d;
z-index: 299;
backdrop-filter: blur(2px);
}
.fade-out-top {
animation: fade-out-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.fade-out {
animation: fade-out 0.3s ease-out both;
}
@keyframes fade-out-top {
0% {
/*transform: translate(-50%, -50%);*/
opacity: 1;
}
100% {
/*transform: translate(-50%, -70%);*/
opacity: 0;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fade-in {
/*animation: fade-in 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;*/
}
@keyframes fade-in {
0% {
transform: translate(-50%, -70%);
opacity: 0;
}
100% {
transform: translate(-50%, -50%);
opacity: 1;
}
}
</style>
<template>
<div v-if="openModel">
<div class="modal-content" :class="{ 'fade-out-top':(animateOut), 'fade-in':(!animateOut), 'fullscreen':(fullscreen)}">
<slot></slot>
</div>
<!-- full screen close button -->
<div class="close-container" v-if="fullscreen && clickOutClose !== false">
<div class="ui green icon button" v-on:click="closeModel">
<i class="close icon"></i>
</div>
</div>
<div class="shade" v-on:click="closeModel" v-on:mouseenter=" hoverOutClose?closeModel():null " :class="{ 'fade-out':(animateOut) }"></div>
</div>
</template>
<script>
export default {
props: [
'fullscreen', //Make the model really big
'clickOutClose', //Set to false to prevent closing of modal by clicking out
'hoverOutClose', //Close if cursor leaves modal
],
data: function(){
return {
openModel:true,
animateOut:false,
}
},
methods: {
closeModel(){
//Don't allow closing by clicking out
if(this.clickOutClose === false){
return
}
//Set stups to close model, animate out
this.animateOut = true
setTimeout( () => {
this.openModel = false
this.$emit('close')
//Once close event is sent, reset to default state
this.animateOut = false
this.openModel = true
}, 800)
},
}
}
</script>

View File

@@ -35,7 +35,6 @@
<i class="search icon"></i>
</div>
<div class="floating-button" v-if="searchTerm.length > 0">
<i class="big link grey close icon" v-on:click="clear()"></i>
</div>

File diff suppressed because it is too large Load Diff

View File

@@ -12,7 +12,12 @@
animation: fadeorama 16s ease infinite;
height: 350px;
text-shadow: 1px 1px 2px black;
text-shadow:
1px 1px 1px rgba(69,69,69,0.1),
-1px -1px 1px rgba(69,69,69,0.1),
-1px 1px 1px rgba(69,69,69,0.1),
1px -1px 1px rgba(69,69,69,0.1)
;
}
.shine {
position: absolute;
@@ -492,6 +497,8 @@
<a target="_blank" href="https://www.maxg.cc">Solid Scribe was created by Max Gialanella</a>
</h3>
<p><a target="_blank" href="https://www.maxg.cc">Check out my Resume</a></p>
<p>OR</p>
<p><a target="_blank" href="http://blog.maxg.cc">Check out my Programming Blog</a></p>
<p>
I was tired of all my data being owned by big companies, having it farmed out for marketing, and leaving the contents of my life exposed to corporations.
</p>

View File

@@ -11,6 +11,12 @@
<div class="six wide column" v-if="$store.getters.totals && $store.getters.totals['totalNotes']">
<search-input />
</div>
<div class="sixteen wide column" v-if="$store.getters.totals && $store.getters.totals['showTrackMetricsButton']">
<router-link class="ui fluid green button" to="/metrictrack">
<i class="calendar check outlin icon"></i>Metric Track
</router-link>
</div>
<div class="ten wide column" :class="{ 'sixteen wide column':$store.getters.getIsUserOnMobile }">
@@ -110,7 +116,7 @@
</div>
<div class="ui small green button" v-on:click="collapseFloatingList = true">
<i class="caret square left outline icon"></i>
Hide Menu
Hide List
</div>
</div>
@@ -154,7 +160,8 @@
</div>
<div class="show-hidden-note-list-button" v-if="collapseFloatingList" v-on:click="collapseFloatingList = false">
<div class="show-hidden-note-list-button"
v-if="collapseFloatingList && openNotes.length > 0" v-on:click="collapseFloatingList = false">
<i class="caret square right outline icon"></i>
</div>

View File

@@ -120,7 +120,7 @@ export default new Router({
path: '/metrictrack',
name: 'Metric Tracking',
meta: {title:'Metric Tracking'},
component: () => import(/* webpackChunkName: "CycletrackingPage" */ '@/pages/CycletrackingPage')
component: () => import(/* webpackChunkName: "MetrictrackingPage" */ '@/pages/MetrictrackingPage')
},
]
})

View File

@@ -10,7 +10,7 @@ export default new Vuex.Store({
nightMode: false,
isUserOnMobile: false,
fetchTotalsTimeout: null,
userTotals: null,
userTotals: null, // {} // setting this to object breaks reactivity
activeSessions: 0,
},
mutations: {
@@ -101,8 +101,23 @@ export default new Vuex.Store({
state.socket = socket
},
setUserTotals(state, totalsObject){
//Save all the totals for the user
state.userTotals = totalsObject
if(!state.userTotals){
state.userTotals = {}
}
// retain old values loaded on initial, extended options load
let oldMissingValues = {}
Object.keys(state.userTotals).forEach(key => {
if(!totalsObject[key] && totalsObject[key] !== 0){
oldMissingValues[key] = state.userTotals[key]
}
})
// combine old settings with updated settings
let oldAndNew = Object.assign(oldMissingValues, totalsObject)
state.userTotals = oldAndNew
//Set computer version from server
const currentVersion = localStorage.getItem('currentVersion')
@@ -126,6 +141,11 @@ export default new Vuex.Store({
setActiveSessions(state, countData){
//Count of the number of active socket.io sessions for this user
state.activeSessions = countData
},
hideMetricTrackingReminder(state){
if(state.userTotals){
state.userTotals['showTrackMetricsButton'] = false
}
}
},
getters: {
@@ -159,7 +179,11 @@ export default new Vuex.Store({
fetchAndUpdateUserTotals ({ commit, state }) {
clearTimeout(state.fetchTotalsTimeout)
state.fetchTotalsTimeout = setTimeout(() => {
axios.post('/api/user/totals')
// load extended options on initial load
let postData = {
extendedOptions: !state.userTotals
}
axios.post('/api/user/totals', postData)
.then( ({data}) => {
commit('setUserTotals', data)
})