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