lance/myweather
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make buttons half-wide on home screen (desktop mode)

Browse source 
having a button take up full screen width is a bit much
This commit is contained in:
Lance Edgar 2024-06-08 19:35:45 -05:00
parent 5d079e1208
commit b983a34bc9
1 changed files with 32 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/views/HomeView.vue
View file

@ -123,34 +123,40 @@ export default {
</o-button>
</o-field>
<div v-for="location in locationStore.locations"
:key="location.coordinates"
class="location">
<o-button variant="primary"
icon-right="arrow-right"
expanded
@click="showWeather(location)">
{{ location.cityState }}
</o-button>
</div>
<div class="columns">
<div class="column is-half">
<div v-if="locationStore.locations.length"
class="location">
<o-button icon-right="edit"
expanded
@click="editLocations()">
Edit List
</o-button>
</div>
<div v-for="location in locationStore.locations"
:key="location.coordinates"
class="location">
<o-button variant="primary"
icon-right="arrow-right"
expanded
@click="showWeather(location)">
{{ location.cityState }}
</o-button>
</div>
<br />
<div class="location">
<o-button variant="primary"
icon-right="location-dot"
expanded
@click="useCurrentLocation()">
Use My Current Location
</o-button>
<div v-if="locationStore.locations.length"
class="location">
<o-button icon-right="edit"
expanded
@click="editLocations()">
Edit List
</o-button>
</div>
<br />
<div class="location">
<o-button variant="primary"
icon-right="location-dot"
expanded
@click="useCurrentLocation()">
Use My Current Location
</o-button>
</div>
</div>
</div>
</main>