add navigation
This commit is contained in:
parent
16ca9c36a6
commit
9cbb2415d3
|
@ -0,0 +1 @@
|
|||
.discover[data-v-62abad9e]{flex-direction:column;gap:1em;height:100%;width:100%;display:flex;justify-content:center;align-items:center}.colorpicker[data-v-62abad9e],[data-v-62abad9e]::-moz-color-swatch{cursor:pointer;border:none;border-color:transparent;background-color:transparent;outline-style:none}input[type=color][data-v-62abad9e]::-webkit-color-swatch-wrapper{padding:0}input[type=color][data-v-62abad9e]::-webkit-color-swatch{border:none}input[type=color][data-v-62abad9e]{-webkit-appearance:none;border:none;cursor:pointer}button[data-v-62abad9e],label[data-v-62abad9e]{color:#aaf0d1;cursor:pointer}button[data-v-62abad9e]{background-color:transparent;border-style:none;font-size:large}.disclaimer[data-v-62abad9e],button[data-v-62abad9e]:focus,button[data-v-62abad9e]:hover{color:#f0d1aa}
|
|
@ -1 +0,0 @@
|
|||
canvas{width:100%;aspect-ratio:1/1}.description[data-v-4d6c2eaa]{padding:1em}.star-view[data-v-984b3372]{height:100%;display:flex;justify-content:center;gap:1em;align-items:center}.star-model[data-v-984b3372]{width:100%;aspect-ratio:1/1;flex-grow:1;max-height:100%}.star-info[data-v-984b3372]{flex-grow:2;width:100%}@media (max-width:720px){.star-view[data-v-984b3372]{width:100%;align-items:stretch;flex-direction:column}}
|
|
@ -1 +0,0 @@
|
|||
.discover[data-v-5acd6253]{flex-direction:column;gap:1em;height:100%;width:100%;display:flex;justify-content:center;align-items:center}.colorpicker[data-v-5acd6253],[data-v-5acd6253]::-moz-color-swatch{cursor:pointer;border:none;border-color:transparent;background-color:transparent;outline-style:none}input[type=color][data-v-5acd6253]::-webkit-color-swatch-wrapper{padding:0}input[type=color][data-v-5acd6253]::-webkit-color-swatch{border:none}input[type=color][data-v-5acd6253]{-webkit-appearance:none;border:none;cursor:pointer}button[data-v-5acd6253],label[data-v-5acd6253]{color:#aaf0d1;cursor:pointer}button[data-v-5acd6253]{background-color:transparent;border-style:none;font-size:large}button[data-v-5acd6253]:focus,button[data-v-5acd6253]:hover{color:#f0d1aa}
|
|
@ -0,0 +1 @@
|
|||
canvas{width:100%;aspect-ratio:1/1}.description[data-v-765298a5]{padding:1em}a[data-v-765298a5],button[data-v-765298a5]{background:none;border-style:none;color:#aaf0d1;cursor:pointer;text-decoration:none;font-size:medium}nav[data-v-765298a5]{display:flex;width:100%;justify-content:space-between}h1[data-v-765298a5],p[data-v-765298a5]{color:#f0d1aa}.star-view[data-v-984b3372]{height:100%;display:flex;justify-content:center;gap:1em;align-items:center}.star-model[data-v-984b3372]{width:100%;aspect-ratio:1/1;flex-grow:1;max-height:100%}.star-info[data-v-984b3372]{flex-grow:2;width:100%}@media (max-width:720px){.star-view[data-v-984b3372]{width:100%;align-items:stretch;flex-direction:column}}
|
|
@ -1 +1 @@
|
|||
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>starchart</title><script defer="defer" src="/js/chunk-vendors.43ff8180.js"></script><script defer="defer" src="/js/app.f571646b.js"></script><link href="/css/app.b279172e.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but starchart doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
|
||||
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>starchart</title><script defer="defer" src="/js/chunk-vendors.43ff8180.js"></script><script defer="defer" src="/js/app.36e1b78d.js"></script><link href="/css/app.b279172e.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but starchart doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
|
|
@ -0,0 +1,2 @@
|
|||
"use strict";(self["webpackChunkstarchart"]=self["webpackChunkstarchart"]||[]).push([[235],{5235:function(a,e,o){o.r(e),o.d(e,{default:function(){return w}});o(7658);var c=o(3396),s=o(9242),r=o(4870),l=o(2752),t=o(3824);const i=a=>((0,c.dD)("data-v-62abad9e"),a=a(),(0,c.Cn)(),a),n={class:"discover"},u=i((()=>(0,c._)("label",{for:"planet-color"},"pick a color",-1))),d=i((()=>(0,c._)("p",{class:"disclaimer"},"(discovered stars will show up for everyone)",-1)));var v=(0,c.aZ)({__name:"DiscoverView",setup(a){const e=(0,l.g)(),o=(0,r.iH)("#aaf0d1");async function i(){await e.discover(o.value),console.log(o.value),t.Z.push(`/visit/${e.visiting?.core.id}`)}return(a,e)=>((0,c.wg)(),(0,c.iD)("div",n,[u,(0,c.wy)((0,c._)("input",{type:"color",id:"planet-color","onUpdate:modelValue":e[0]||(e[0]=a=>o.value=a),class:"colorpicker"},null,512),[[s.nr,o.value]]),(0,c._)("button",{onClick:e[1]||(e[1]=a=>i())},"discover!"),d]))}}),p=o(89);const f=(0,p.Z)(v,[["__scopeId","data-v-62abad9e"]]);var w=f}}]);
|
||||
//# sourceMappingURL=235.823dba86.js.map
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"js/235.823dba86.js","mappings":"4NAGA,MAAMA,EAAeC,KAAMC,EAAAA,EAAAA,IAAa,mBAAmBD,EAAEA,KAAIE,EAAAA,EAAAA,MAAcF,GACzEG,EAAa,CAAEC,MAAO,YACtBC,EAA2BN,GAAa,KAAmBO,EAAAA,EAAAA,GAAoB,QAAS,CAAEC,IAAK,gBAAkB,gBAAiB,KAClIC,EAA2BT,GAAa,KAAmBO,EAAAA,EAAAA,GAAoB,IAAK,CAAEF,MAAO,cAAgB,gDAAiD,KAOpK,OAA4BK,EAAAA,EAAAA,IAAiB,CAC3CC,OAAQ,eACRC,KAAAA,CAAMC,GAER,MAAMC,GAAQC,EAAAA,EAAAA,KACRC,GAAQC,EAAAA,EAAAA,IAAI,WAElBC,eAAeC,UACPL,EAAMM,SAASJ,EAAMK,OAC3BC,QAAQC,IAAIP,EAAMK,OAClBG,EAAAA,EAAOC,KAAK,UAAUX,EAAMY,UAAUC,KAAKC,KAE7C,CAEA,MAAO,CAACC,EAAUC,MACRC,EAAAA,EAAAA,OAAcC,EAAAA,EAAAA,IAAoB,MAAO5B,EAAY,CAC3DE,GACA2B,EAAAA,EAAAA,KAAgB1B,EAAAA,EAAAA,GAAoB,QAAS,CAC3C2B,KAAM,QACNN,GAAI,eACJ,sBAAuBE,EAAO,KAAOA,EAAO,GAAMK,GAAkBnB,EAAOK,MAAQc,GACnF9B,MAAO,eACN,KAAM,KAAM,CACb,CAAC+B,EAAAA,GAAapB,EAAMK,UAEtBd,EAAAA,EAAAA,GAAoB,SAAU,CAC5B8B,QAASP,EAAO,KAAOA,EAAO,GAAMK,GAAiBhB,MACpD,aACHV,IAGJ,I,QCtCA,MAAM6B,GAA2B,OAAgB,EAAQ,CAAC,CAAC,YAAY,qBAEvE,O","sources":["webpack://starchart/./src/views/DiscoverView.vue?1a59","webpack://starchart/./src/views/DiscoverView.vue"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createElementVNode as _createElementVNode, vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \"vue\"\n\nconst _withScopeId = n => (_pushScopeId(\"data-v-62abad9e\"),n=n(),_popScopeId(),n)\nconst _hoisted_1 = { class: \"discover\" }\nconst _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"label\", { for: \"planet-color\" }, \"pick a color\", -1))\nconst _hoisted_3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"p\", { class: \"disclaimer\" }, \"(discovered stars will show up for everyone)\", -1))\n\nimport { ref } from \"vue\";\nimport { useChartStore } from \"@/state/stars\";\nimport router from \"@/router\";\n\n\nexport default /*#__PURE__*/_defineComponent({\n __name: 'DiscoverView',\n setup(__props) {\n\nconst store = useChartStore();\nconst color = ref(\"#aaf0d1\");\n\nasync function send() {\n await store.discover(color.value);\n console.log(color.value);\n router.push(`/visit/${store.visiting?.core.id}`);\n return;\n}\n\nreturn (_ctx: any,_cache: any) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n _hoisted_2,\n _withDirectives(_createElementVNode(\"input\", {\n type: \"color\",\n id: \"planet-color\",\n \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => ((color).value = $event)),\n class: \"colorpicker\"\n }, null, 512), [\n [_vModelText, color.value]\n ]),\n _createElementVNode(\"button\", {\n onClick: _cache[1] || (_cache[1] = ($event: any) => (send()))\n }, \"discover!\"),\n _hoisted_3\n ]))\n}\n}\n\n})","import script from \"./DiscoverView.vue?vue&type=script&setup=true&lang=ts\"\nexport * from \"./DiscoverView.vue?vue&type=script&setup=true&lang=ts\"\n\nimport \"./DiscoverView.vue?vue&type=style&index=0&id=62abad9e&scoped=true&lang=css\"\n\nimport exportComponent from \"../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-62abad9e\"]])\n\nexport default __exports__"],"names":["_withScopeId","n","_pushScopeId","_popScopeId","_hoisted_1","class","_hoisted_2","_createElementVNode","for","_hoisted_3","_defineComponent","__name","setup","__props","store","useChartStore","color","ref","async","send","discover","value","console","log","router","push","visiting","core","id","_ctx","_cache","_openBlock","_createElementBlock","_withDirectives","type","$event","_vModelText","onClick","__exports__"],"sourceRoot":""}
|
File diff suppressed because one or more lines are too long
|
@ -1,2 +0,0 @@
|
|||
"use strict";(self["webpackChunkstarchart"]=self["webpackChunkstarchart"]||[]).push([[599],{9599:function(a,c,e){e.r(c),e.d(c,{default:function(){return f}});e(7658);var o=e(3396),t=e(9242),n=e(4870),r=e(2752),l=e(3824);const s=a=>((0,o.dD)("data-v-5acd6253"),a=a(),(0,o.Cn)(),a),i={class:"discover"},u=s((()=>(0,o._)("label",{for:"planet-color"},"pick a color",-1)));var d=(0,o.aZ)({__name:"DiscoverView",setup(a){const c=(0,r.g)(),e=(0,n.iH)("#aaf0d1");async function s(){await c.discover(e.value),console.log(e.value),l.Z.push(`/visit/${c.visiting?.core.id}`)}return(a,c)=>((0,o.wg)(),(0,o.iD)("div",i,[u,(0,o.wy)((0,o._)("input",{type:"color",id:"planet-color","onUpdate:modelValue":c[0]||(c[0]=a=>e.value=a),class:"colorpicker"},null,512),[[t.nr,e.value]]),(0,o._)("button",{onClick:c[1]||(c[1]=a=>s())},"discover!")]))}}),v=e(89);const p=(0,v.Z)(d,[["__scopeId","data-v-5acd6253"]]);var f=p}}]);
|
||||
//# sourceMappingURL=599.dbf8a90d.js.map
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"js/599.dbf8a90d.js","mappings":"4NAGA,MAAMA,EAAeC,KAAMC,EAAAA,EAAAA,IAAa,mBAAmBD,EAAEA,KAAIE,EAAAA,EAAAA,MAAcF,GACzEG,EAAa,CAAEC,MAAO,YACtBC,EAA2BN,GAAa,KAAmBO,EAAAA,EAAAA,GAAoB,QAAS,CAAEC,IAAK,gBAAkB,gBAAiB,KAOxI,OAA4BC,EAAAA,EAAAA,IAAiB,CAC3CC,OAAQ,eACRC,KAAAA,CAAMC,GAER,MAAMC,GAAQC,EAAAA,EAAAA,KACRC,GAAQC,EAAAA,EAAAA,IAAI,WAElBC,eAAeC,UACPL,EAAMM,SAASJ,EAAMK,OAC3BC,QAAQC,IAAIP,EAAMK,OAClBG,EAAAA,EAAOC,KAAK,UAAUX,EAAMY,UAAUC,KAAKC,KAE7C,CAEA,MAAO,CAACC,EAAUC,MACRC,EAAAA,EAAAA,OAAcC,EAAAA,EAAAA,IAAoB,MAAO3B,EAAY,CAC3DE,GACA0B,EAAAA,EAAAA,KAAgBzB,EAAAA,EAAAA,GAAoB,QAAS,CAC3C0B,KAAM,QACNN,GAAI,eACJ,sBAAuBE,EAAO,KAAOA,EAAO,GAAMK,GAAkBnB,EAAOK,MAAQc,GACnF7B,MAAO,eACN,KAAM,KAAM,CACb,CAAC8B,EAAAA,GAAapB,EAAMK,UAEtBb,EAAAA,EAAAA,GAAoB,SAAU,CAC5B6B,QAASP,EAAO,KAAOA,EAAO,GAAMK,GAAiBhB,MACpD,eAGP,I,QCpCA,MAAMmB,GAA2B,OAAgB,EAAQ,CAAC,CAAC,YAAY,qBAEvE,O","sources":["webpack://starchart/./src/views/DiscoverView.vue?1a59","webpack://starchart/./src/views/DiscoverView.vue"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createElementVNode as _createElementVNode, vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \"vue\"\n\nconst _withScopeId = n => (_pushScopeId(\"data-v-5acd6253\"),n=n(),_popScopeId(),n)\nconst _hoisted_1 = { class: \"discover\" }\nconst _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"label\", { for: \"planet-color\" }, \"pick a color\", -1))\n\nimport { ref } from \"vue\";\nimport { useChartStore } from \"@/state/stars\";\nimport router from \"@/router\";\n\n\nexport default /*#__PURE__*/_defineComponent({\n __name: 'DiscoverView',\n setup(__props) {\n\nconst store = useChartStore();\nconst color = ref(\"#aaf0d1\");\n\nasync function send() {\n await store.discover(color.value);\n console.log(color.value);\n router.push(`/visit/${store.visiting?.core.id}`);\n return;\n}\n\nreturn (_ctx: any,_cache: any) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n _hoisted_2,\n _withDirectives(_createElementVNode(\"input\", {\n type: \"color\",\n id: \"planet-color\",\n \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => ((color).value = $event)),\n class: \"colorpicker\"\n }, null, 512), [\n [_vModelText, color.value]\n ]),\n _createElementVNode(\"button\", {\n onClick: _cache[1] || (_cache[1] = ($event: any) => (send()))\n }, \"discover!\")\n ]))\n}\n}\n\n})","import script from \"./DiscoverView.vue?vue&type=script&setup=true&lang=ts\"\nexport * from \"./DiscoverView.vue?vue&type=script&setup=true&lang=ts\"\n\nimport \"./DiscoverView.vue?vue&type=style&index=0&id=5acd6253&scoped=true&lang=css\"\n\nimport exportComponent from \"../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-5acd6253\"]])\n\nexport default __exports__"],"names":["_withScopeId","n","_pushScopeId","_popScopeId","_hoisted_1","class","_hoisted_2","_createElementVNode","for","_defineComponent","__name","setup","__props","store","useChartStore","color","ref","async","send","discover","value","console","log","router","push","visiting","core","id","_ctx","_cache","_openBlock","_createElementBlock","_withDirectives","type","$event","_vModelText","onClick","__exports__"],"sourceRoot":""}
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,21 +1,67 @@
|
|||
<template>
|
||||
<div class="description">
|
||||
<nav>
|
||||
<a v-if="star.core.id >= 1" :href="`/visit/${star.core.id - 1}`"
|
||||
>previous</a
|
||||
>
|
||||
<button @click="copy">
|
||||
<span v-if="!copied">share</span><span v-else>link copied</span>
|
||||
</button>
|
||||
<a
|
||||
v-if="star.core.id <= store.stars.length"
|
||||
:href="`/visit/${star.core.id + 1}`"
|
||||
>next</a
|
||||
>
|
||||
</nav>
|
||||
<h1>{{ star.name }}</h1>
|
||||
<p>{{ star.description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from "vue";
|
||||
import { PropType, ref } from "vue";
|
||||
import { Star } from "@/swagger";
|
||||
import { useChartStore } from "@/state/stars";
|
||||
|
||||
defineProps({
|
||||
star: { type: Object as PropType<Star>, required: true },
|
||||
});
|
||||
|
||||
const store = useChartStore();
|
||||
|
||||
const copied = ref(false);
|
||||
|
||||
const copy = async () => {
|
||||
await navigator.clipboard.writeText(window.location.href);
|
||||
copied.value = true;
|
||||
};
|
||||
|
||||
store.fetchChart();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.description {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
button,
|
||||
a {
|
||||
background: none;
|
||||
border-style: none;
|
||||
color: #aaf0d1;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
h1,
|
||||
p {
|
||||
color: #f0d1aa;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
<label for="planet-color">pick a color</label>
|
||||
<input type="color" id="planet-color" v-model="color" class="colorpicker" />
|
||||
<button @click="send()">discover!</button>
|
||||
<p class="disclaimer">(discovered stars will show up for everyone)</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -72,4 +73,8 @@ button:focus,
|
|||
button:hover {
|
||||
color: #f0d1aa;
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
color: #f0d1aa;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue