Browse Source

Adaptivity

vue
Lev 2 years ago
parent
commit
7fbd425260
  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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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>

Loading…
Cancel
Save