agorata
/
frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Adaptivity

vue
Lev 2 years ago
parent
b61609444e
commit
7fbd425260
7 changed files with 63 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      .idea/workspace.xml
  2. 8
      src/assets/main.css
  3. 9
      src/components/TonButton.vue
  4. 18
      src/components/ZonePricing.vue
  5. 12
      src/components/ZoneTable.vue
  6. 1
      src/views/Checkout.vue
  7. 8
      src/views/Explore.vue

24
.idea/workspace.xml
Unescape View File

@ -1,16 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Back button + stuff for deploy"> <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="The screens for domain owners">
<change afterPath="$PROJECT_DIR$/src/views/IHave.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/main.css" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/assets/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/main.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/TonButton.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/TonButton.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/ZonePricing.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZonePricing.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/ZoneTable.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZoneTable.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/ZoneTable.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZoneTable.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/result.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/result.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/Checkout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Checkout.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/views/Checkout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Checkout.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/IKnow.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/IKnow.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/views/Explore.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Explore.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/zone.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/zone.ts" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -82,7 +80,7 @@
<workItem from="1671490155427" duration="1029000" /> <workItem from="1671490155427" duration="1029000" />
<workItem from="1671554049942" duration="6375000" /> <workItem from="1671554049942" duration="6375000" />
<workItem from="1671797380442" duration="603000" /> <workItem from="1671797380442" duration="603000" />
<workItem from="1671887059754" duration="3759000" /> <workItem from="1671887059754" duration="4958000" />
</task> </task>
<task id="LOCAL-00001" summary="Wrote the landing"> <task id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created> <created>1670844191163</created>
@ -182,7 +180,14 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1671398124125</updated> <updated>1671398124125</updated>
</task> </task>
<option name="localTasksCounter" value="15" /> <task id="LOCAL-00015" summary="The screens for domain owners">
<created>1671892446204</created>
<option name="number" value="00015" />
<option name="presentableId" value="LOCAL-00015" />
<option name="project" value="LOCAL" />
<updated>1671892446204</updated>
</task>
<option name="localTasksCounter" value="16" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -214,6 +219,7 @@
<MESSAGE value="Awesome QR at checkout" /> <MESSAGE value="Awesome QR at checkout" />
<MESSAGE value="Add (almost) monochrome logo + loading QR on checkout" /> <MESSAGE value="Add (almost) monochrome logo + loading QR on checkout" />
<MESSAGE value="Back button + stuff for deploy" /> <MESSAGE value="Back button + stuff for deploy" />
<option name="LAST_COMMIT_MESSAGE" value="Back button + stuff for deploy" /> <MESSAGE value="The screens for domain owners" />
<option name="LAST_COMMIT_MESSAGE" value="The screens for domain owners" />
</component> </component>
</project> </project>

8
src/assets/main.css
Unescape View File

@ -163,6 +163,14 @@ a,
cursor: pointer; cursor: pointer;
} }
@media only screen and (max-width: 800px) {
.get_b {
margin-left: 0.1rem;
padding-left: 0.4rem;
padding-right: 0.4rem;
}
}
.flex { .flex {
display: flex; display: flex;
} }

9
src/components/TonButton.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<button class="b darkish"> <button class="b darkish mobile-scale">
<span><slot></slot></span> <span><slot></slot></span>
<img src="@/assets/icons/ton_bottom.svg" alt="TON"/> <img src="@/assets/icons/ton_bottom.svg" alt="TON"/>
</button> </button>
@ -27,4 +27,11 @@ button > img:not(:first-child) {
height: 0.8rem; height: 0.8rem;
margin-left: 0.4rem; margin-left: 0.4rem;
} }
@media only screen and (max-width: 800px) {
button.b.darkish {
margin: 0.15rem;
padding: 0.15rem;
}
}
</style> </style>

18
src/components/ZonePricing.vue
Unescape View File

@ -13,12 +13,12 @@
<tr> <tr>
<th></th> <th></th>
<th v-if="zone.canAuction()"> <th v-if="zone.canAuction()">
<Popper content="Buy on auction" placement="left" :hover="true" :arrow="true"> <Popper content="Buy on auction" placement="left" :hover="true" :arrow="true" class="mobile-scale">
<img src="@/assets/icons/buy.svg" class="buy_img" alt="Buy on auction"/> <img src="@/assets/icons/buy.svg" class="buy_img" alt="Buy on auction"/>
</Popper> </Popper>
</th> </th>
<th v-if="zone.canBuy()"> <th v-if="zone.canBuy()">
<Popper content="Buy instantly" placement="right" :hover="true" :arrow="true"> <Popper content="Buy instantly" placement="right" :hover="true" :arrow="true" class="mobile-scale">
<img src="@/assets/icons/instant_buy.svg" class="buy_img" alt="Instant Buy"/> <img src="@/assets/icons/instant_buy.svg" class="buy_img" alt="Instant Buy"/>
</Popper> </Popper>
</th> </th>
@ -46,7 +46,7 @@
</tbody> </tbody>
</table> </table>
<router-link :to="{name: 'Get', params: {domain_init: 'example', zone: zone.zone}}"> <router-link :to="{name: 'Get', params: {domain_init: 'example', zone: zone.zone}}">
<div v-if="has_get" class="get_b"> <div v-if="has_get" class="get_b mobile-scale">
Get Get
</div> </div>
</router-link> </router-link>
@ -82,6 +82,18 @@ tr > td:first-child {
padding-left: 3rem; padding-left: 3rem;
} }
@media only screen and (max-width: 800px) {
tr > td:first-child {
font-size: 0.9rem;
padding: 0;
}
tr > td {
padding: 0;
}
}
tr > th { tr > th {
padding-bottom: -10px; padding-bottom: -10px;
} }

12
src/components/ZoneTable.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div style="overflow-x: auto; max-width: 98vw;"> <div style="overflow-x: auto; max-width: 98vw;">
<table class="table_outer mobile-scale"> <table class="table_outer">
<thead class="table_header"> <thead class="table_header">
<tr> <tr>
<th>Domain</th> <th>Domain</th>
@ -9,12 +9,12 @@
</thead> </thead>
<tbody class="table_content"> <tbody class="table_content">
<tr v-for="zone in zones" :key="zone.zone"> <tr v-for="zone in zones" :key="zone.zone">
<td class="mobile-scale"> <td class="zone">
<router-link :to="{name: 'GetZ', params: {zone: zone.zone}}" style="color: white"> <router-link :to="{name: 'GetZ', params: {zone: zone.zone}}" style="color: white">
{{ zone.zone }} {{ zone.zone }}
</router-link> </router-link>
</td> </td>
<td style="display: flex; justify-content: flex-end" class="mobile-scale"> <td style="display: flex; justify-content: flex-end">
<ZonePricing :zone="zone"/> <ZonePricing :zone="zone"/>
</td> </td>
</tr> </tr>
@ -56,6 +56,12 @@ The inner box is table_content, it takes all of the space except for the header
min-width: max(30rem, 50vw); min-width: max(30rem, 50vw);
} }
@media only screen and (max-width: 800px) {
td.zone {
font-size: 1.1rem;
}
}
.table_header { .table_header {
padding: 0.5rem 1.3rem; padding: 0.5rem 1.3rem;
} }

1
src/views/Checkout.vue
Unescape View File

@ -8,7 +8,6 @@
</button> </button>
</router-link> </router-link>
</template> </template>
<!-- todo: button to go back to Get -->
<!-- todo: handle auction --> <!-- todo: handle auction -->
<div class="text">To buy</div> <div class="text">To buy</div>
<DomainBar :zone="'.' + zone" :value="domain" :has_button="false" :editable="false"/> <DomainBar :zone="'.' + zone" :value="domain" :has_button="false" :editable="false"/>

8
src/views/Explore.vue
Unescape View File

@ -1,5 +1,13 @@
<template> <template>
<DarkLayout> <DarkLayout>
<template v-slot:header>
<router-link :to="{name: 'Get', params: {domain_init: core_domain, zone: zone}}">
<button class="b darkish back">
<img src="@/assets/icons/ton_left.svg" alt="TON"/>
Back
</button>
</router-link>
</template>
<!-- todo: button to go back + this whole view --> <!-- todo: button to go back + this whole view -->
<DomainBar :value="core_domain" :zone="'.' + zone" :has_button="false" :editable="false"/> <DomainBar :value="core_domain" :zone="'.' + zone" :has_button="false" :editable="false"/>
</DarkLayout> </DarkLayout>

Write Preview
Loading…
Cancel
Save