mirror
/
sotlas-frontend
kopia lustrzana https://github.com/manuelkasper/sotlas-frontend
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Change cell-class syntax for buefy 0.9

buefy-0.9
Manuel Kasper 2023-05-10 17:39:29 +02:00
rodzic bd50fb1c8d
commit 11fff74b8c
9 zmienionych plików z 45 dodań i 47 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

8
src/components/ActivationsList.vue
Wyświetl plik

@ -9,16 +9,16 @@
<b-table-column field="date" label="Date" sortable v-slot="props">
{{ props.row.date | formatActivationDate }}
</b-table-column>
<b-table-column field="summit.code" label="Summit" class="code" sortable v-slot="props">
<b-table-column field="summit.code" label="Summit" cell-class="code" sortable v-slot="props">
<CountryFlag v-if="props.row.summit.isoCode" :country="props.row.summit.isoCode" class="flag" />
<router-link :to="makeSummitLink(props.row.summit.code)">{{ props.row.summit.code }}</router-link>
</b-table-column>
<b-table-column field="summit.name" label="Name" class="name" sortable v-slot="props">
<b-table-column field="summit.name" label="Name" cell-class="name" sortable v-slot="props">
<router-link :to="makeSummitLink(props.row.summit.code)">{{ props.row.summit.name }}</router-link>
<font-awesome-icon v-if="hasOwnPhotos(props.row.summit)" class="photos-icon" :icon="['far', 'images']" />
<font-awesome-icon v-else-if="props.row.summit.photoAuthors && props.row.summit.photoAuthors.length > 0" class="photos-icon-others" :icon="['far', 'images']" />
</b-table-column>
<b-table-column field="summit.altitude" label="Altitude" class="altitude" sortable numeric v-slot="props">
<b-table-column field="summit.altitude" label="Altitude" cell-class="altitude" sortable numeric v-slot="props">
<AltitudeLabel :altitude="props.row.summit.altitude" />
</b-table-column>
<b-table-column field="points" label="Points" sortable v-slot="props">
@ -132,7 +132,7 @@ export default {
margin-left: 0.5em;
color: #aaa;
}
.invalid .code, .invalid .name {
>>> .invalid .code, >>> .invalid .name {
opacity: 0.7;
text-decoration: line-through;
}

8
src/components/AlertsList.vue
Wyświetl plik

@ -18,7 +18,7 @@
</CardPagination>
<p v-else-if="!$mq.desktop && cardAlerts.length === 0">No matching alerts found.</p>
<b-table v-else default-sort="dateActivated" :narrowed="true" :striped="true" :data="data" :paginated="paginated" :per-page="perPage" :current-page.sync="curPage" :row-class="rowClass">
<b-table-column field="dateActivated" class="timestamp" label="Date/Time" sortable v-slot="props">
<b-table-column field="dateActivated" cell-class="nowrap timestamp" label="Date/Time" sortable v-slot="props">
<span v-html="formatDateTimeRelative(props.row.dateActivated)" />
</b-table-column>
<b-table-column v-if="showCallsign" field="activatorCallsign" label="Callsign" sortable v-slot="props">
@ -29,7 +29,7 @@
{{ props.row.activatorCallsign }}
</template>
</b-table-column>
<b-table-column v-if="showSummitInfo" field="summit.code" label="Summit Ref." class="nowrap" sortable v-slot="props">
<b-table-column v-if="showSummitInfo" field="summit.code" label="Summit Ref." cell-class="nowrap" sortable v-slot="props">
<CountryFlag v-if="props.row.summit.isoCode && $mq.fullhd" :country="props.row.summit.isoCode" class="flag" />
<router-link v-if="props.row.summit.name" :to="makeSummitLink(props.row.summit.code)">{{ props.row.summit.code }}</router-link>
<span v-else>{{ props.row.summit.code }}</span>
@ -46,7 +46,7 @@
<b-table-column v-if="showSummitInfo" field="summit.activationCount" label="Act." sortable numeric v-slot="props">
<ActivationCount :activationCount="props.row.summit.activationCount" />
</b-table-column>
<b-table-column class="comments" label="Frequencies/Comments" v-slot="props">
<b-table-column cell-class="comments" label="Frequencies/Comments" v-slot="props">
<div class="comments-cell">
<div>
{{ props.row.frequency }}<br />
@ -227,7 +227,7 @@ export default {
<style scoped>
@media (min-width: 769px) {
.table .comments {
>>> .table .comments {
font-size: 0.8rem;
max-width: 30em;
}

36
src/components/QSOList.vue
Wyświetl plik

@ -1,23 +1,21 @@
<template>
<b-table class="auto-width" :narrowed="true" :striped="true" :data="data" :mobile-cards="false">
<template slot-scope="props">
<b-table-column field="TimeOfDay" label="Time" class="nowrap" sortable>
{{ props.row.TimeOfDay }}
</b-table-column>
<b-table-column field="OtherCallsign" label="Callsign" class="nowrap" sortable>
<CountryFlag :country="isoCodeForCallsign(props.row.OtherCallsign.trim())" class="flag" />
<router-link :to="makeActivatorLink(props.row.OtherCallsign.trim())">{{ props.row.OtherCallsign.trim() }}</router-link>
</b-table-column>
<b-table-column field="Band" label="Band" :custom-sort="sortBand" class="nowrap" sortable numeric>
{{ bandForDbFrequency(props.row.Band) }}
</b-table-column>
<b-table-column field="Mode" label="Mode" class="mode nowrap" sortable>
<ModeLabel :mode="props.row.Mode" />
</b-table-column>
<b-table-column field="Notes" label="Notes" class="nowrap">
<span v-html="formatNotes(props.row.Notes)" />
</b-table-column>
</template>
<b-table-column field="TimeOfDay" label="Time" cell-class="nowrap" sortable v-slot="props">
{{ props.row.TimeOfDay }}
</b-table-column>
<b-table-column field="OtherCallsign" label="Callsign" cell-class="nowrap" sortable v-slot="props">
<CountryFlag :country="isoCodeForCallsign(props.row.OtherCallsign.trim())" class="flag" />
<router-link :to="makeActivatorLink(props.row.OtherCallsign.trim())">{{ props.row.OtherCallsign.trim() }}</router-link>
</b-table-column>
<b-table-column field="Band" label="Band" :custom-sort="sortBand" cell-class="nowrap" sortable numeric v-slot="props">
{{ bandForDbFrequency(props.row.Band) }}
</b-table-column>
<b-table-column field="Mode" label="Mode" cell-class="mode nowrap" sortable v-slot="props">
<ModeLabel :mode="props.row.Mode" />
</b-table-column>
<b-table-column field="Notes" label="Notes" cell-class="nowrap" v-slot="props">
<span v-html="formatNotes(props.row.Notes)" />
</b-table-column>
</b-table>
</template>
@ -69,7 +67,7 @@ export default {
.flag {
margin-right: 0.4em;
}
.mode .tag {
>>> .mode .tag {
padding-top: 0.3em;
padding-bottom: 0.3em;
}

8
src/components/RBNSpotsList.vue
Wyświetl plik

@ -5,7 +5,7 @@
</template>
</CardPagination>
<b-table v-else :default-sort="['timeStamp', 'desc']" :narrowed="true" :striped="true" :data="data" :paginated="paginated" :per-page="perPage" :row-class="rowClass">
<b-table-column field="timeStamp" class="timestamp" label="Time" sortable v-slot="props">
<b-table-column field="timeStamp" cell-class="timestamp" label="Time" sortable v-slot="props">
<span v-html="formatTimeDay(props.row.timeStamp)" />
</b-table-column>
<b-table-column field="callsign" label="Callsign" sortable v-slot="props">
@ -100,13 +100,13 @@ export default {
</script>
<style scoped>
tr .timestamp {
>>> tr .timestamp {
border-left: 3px solid #e0e0e0;
}
tr.recent1 .timestamp {
>> tr.recent1 .timestamp {
border-left: 3px solid #f28591;
}
tr.recent2 .timestamp {
>>> tr.recent2 .timestamp {
border-left: 3px solid #fbaf63;
}
.card {

12
src/components/SpotsList.vue
Wyświetl plik

@ -14,7 +14,7 @@
</template>
</CardPagination>
<b-table v-else :default-sort="['timeStamp', 'desc']" :narrowed="true" :striped="true" :data="data" :paginated="paginated" :per-page="perPage" :current-page.sync="curPage" :row-class="rowClass">
<b-table-column field="timeStamp" class="timestamp" label="Time" sortable v-slot="props">
<b-table-column field="timeStamp" cell-class="timestamp" label="Time" sortable v-slot="props">
<span v-html="formatTimeDay(props.row.timeStamp)" />
</b-table-column>
<b-table-column v-if="showCallsign" field="activatorCallsign" label="Callsign" sortable v-slot="props">
@ -31,7 +31,7 @@
<b-table-column field="mode" label="Mode" sortable v-slot="props">
<ModeLabel :mode="props.row.mode" />
</b-table-column>
<b-table-column v-if="showSummitInfo" field="summit.code" label="Summit Ref." class="nowrap" sortable v-slot="props">
<b-table-column v-if="showSummitInfo" field="summit.code" label="Summit Ref." cell-class="nowrap" sortable v-slot="props">
<CountryFlag v-if="props.row.summit.isoCode && $mq.fullhd" :country="props.row.summit.isoCode" class="flag" />
<router-link v-if="props.row.summit.name" :to="makeSummitLink(props.row.summit.code)">{{ props.row.summit.code }}</router-link>
<span v-else>{{ props.row.summit.code }}</span>
@ -51,7 +51,7 @@
<b-table-column field="callsign" label="Posted By" sortable v-slot="props">
{{ props.row.callsign }}
</b-table-column>
<b-table-column field="comments" class="comments" label="Comments" v-slot="props">
<b-table-column field="comments" label="Comments" v-slot="props">
<div class="comments-cell">
<b-tooltip class="comments-tooltip" :label="props.row.comments" position="is-left" multilined :active="!$mq.fullhd"><div>{{ props.row.comments }}</div></b-tooltip>
<b-dropdown v-if="canEditSpot(props.row)" class="actions" aria-role="list">
@ -215,13 +215,13 @@ export default {
</script>
<style scoped>
tr .timestamp {
>>> tr .timestamp {
border-left: 3px solid #e0e0e0;
}
tr.recent1 .timestamp {
>>> tr.recent1 .timestamp {
border-left: 3px solid #f28591;
}
tr.recent2 .timestamp {
>>> tr.recent2 .timestamp {
border-left: 3px solid #fbaf63;
}
@media (min-width: 769px) {

14
src/components/SummitList.vue
Wyświetl plik

@ -1,19 +1,19 @@
<template>
<b-table :class="{ 'auto-width': autoWidth, summits: true }" default-sort="code" :narrowed="true" :striped="true" :data="data" :mobile-cards="false" :row-class="(row, index) => !row.isValid && 'is-invalid'">
<b-table-column field="code" label="Reference" class="nowrap" sortable v-slot="props">
<b-table-column field="code" label="Reference" cell-class="nowrap" sortable v-slot="props">
<router-link :to="makeSummitLink(props.row.code)">{{ props.row.code }}</router-link>
</b-table-column>
<b-table-column field="name" label="Name" class="summit-name" sortable v-slot="props">
<b-table-column field="name" label="Name" cell-class="summit-name" sortable v-slot="props">
<router-link :to="makeSummitLink(props.row.code)">{{ props.row.name }}</router-link>
<font-awesome-icon v-if="props.row.hasPhotos" class="photos-icon" :icon="['far', 'images']" />
</b-table-column>
<b-table-column field="altitude" :label="$mq.mobile ? 'Alt.' : 'Altitude'" class="nowrap" sortable numeric v-slot="props">
<b-table-column field="altitude" :label="$mq.mobile ? 'Alt.' : 'Altitude'" cell-class="nowrap" sortable numeric v-slot="props">
<AltitudeLabel :altitude="props.row.altitude" />
</b-table-column>
<b-table-column field="points" :label="$mq.mobile ? 'Pts.' : 'Points'" class="nowrap" sortable v-slot="props">
<b-table-column field="points" :label="$mq.mobile ? 'Pts.' : 'Points'" cell-class="nowrap" sortable v-slot="props">
<SummitPointsLabel :points="props.row.points" :bonus="$mq.mobile ? null : props.row.bonusPoints" class="points" />
</b-table-column>
<b-table-column field="activationCount" :label="$mq.mobile ? 'Act.' : 'Activations'" class="nowrap" sortable numeric v-slot="props">
<b-table-column field="activationCount" :label="$mq.mobile ? 'Act.' : 'Activations'" cell-class="nowrap" sortable numeric v-slot="props">
{{ props.row.activationCount }}
<font-awesome-icon v-if="myActivatedSummits" :icon="activationIcon(props.row)" :class="activationIconClass(props.row)" :label="activationIconLabel(props.row)" :title="activationIconLabel(props.row)" />
<font-awesome-icon v-if="myActivatedSummitsThisYear" :icon="['far', 'calendar-check']" :class="calendarIconClass(props.row)" :label="calendarIconLabel(props.row)" :title="calendarIconLabel(props.row)" />
@ -129,7 +129,7 @@ export default {
opacity: 0.5;
}
@media (max-width: 414px) {
.table .summit-name {
>>> .table .summit-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -140,7 +140,7 @@ export default {
.table td, .table th {
padding: 0.25em 0.3em;
}
.table .summit-name {
>>> .table .summit-name {
max-width: 8em;
}
}

2
src/views/Activators.vue
Wyświetl plik

@ -10,7 +10,7 @@
</b-field>
<b-table class="auto-width" :narrowed="true" :striped="true" :data="activators" :loading="loading" paginated backend-pagination :total="total" :per-page="perPage" :current-page.sync="curPage" backend-sorting :default-sort="[sortField, sortDirection]" @sort="onSort" :mobile-cards="false">
<b-table-column field="callsign" label="Callsign" class="nowrap" sortable v-slot="props">
<b-table-column field="callsign" label="Callsign" cell-class="nowrap" sortable v-slot="props">
<CountryFlag :country="country(props.row.callsign)" class="flag" />
<router-link :to="makeActivatorLink(props.row.callsign)">{{ props.row.callsign }}</router-link>
</b-table-column>

2
src/views/Association.vue
Wyświetl plik

@ -16,7 +16,7 @@
<div class="columns">
<div class="column">
<b-table default-sort="code" :narrowed="true" :striped="true" :data="filteredRegions" :mobile-cards="false">
<b-table-column field="code" label="Identifier" class="nowrap" sortable v-slot="props">
<b-table-column field="code" label="Identifier" cell-class="nowrap" sortable v-slot="props">
<router-link :to="regionLink(props.row)">{{ props.row.code }}</router-link>
</b-table-column>
<b-table-column field="name" label="Name" sortable v-slot="props">

2
src/views/AssociationList.vue
Wyświetl plik

@ -12,7 +12,7 @@
<FilterInput v-model="filter" ref="filter" />
</b-field>
<b-table class="auto-width" default-sort="code" :narrowed="true" :striped="true" :data="filteredAssociations" :mobile-cards="false">
<b-table-column field="code" label="Identifier" class="nowrap" sortable v-slot="props">
<b-table-column field="code" label="Identifier" cell-class="nowrap" sortable v-slot="props">
<router-link :to="associationLink(props.row)">{{ props.row.code }}</router-link>
</b-table-column>
<b-table-column field="name" label="Name" sortable v-slot="props">