btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

📱 Responsive History section for mobile devices

Browse Source
This commit is contained in:
Liyas Thomas
2019-11-10 21:49:26 +05:30
parent 10b699a6f7
commit 9f0512e81e
2 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/history.vue
View File

@@ -5,16 +5,16 @@
<input aria-label="Search" type="text" placeholder="search history" v-model="filterText" />
</li>
</ul>
<ul v-if="history.length !== 0">
<ul v-if="history.length !== 0" class="labels">
<div class="show-on-small-screen">
<li>
<button class="icon">
<i class="material-icons">details</i>
<i class="material-icons">star_half</i>
</button>
</li>
<li>
<button class="icon">
<i class="material-icons">change_history</i>
<i class="material-icons">history</i>
</button>
</li>
</div>
@@ -89,22 +89,26 @@
</button>
</li>
</div>
<li>
<input aria-label="Label" type="text" readonly :value="entry.label" placeholder="No label" />
</li>
<li>
<input aria-label="Time" type="text" readonly :value="entry.time" v-tooltip="entry.date" />
</li>
<div class="show-on-small-screen">
<li>
<input aria-label="Label" type="text" readonly :value="entry.label" placeholder="No label" />
</li>
<li>
<input aria-label="Time" type="text" readonly :value="entry.time" v-tooltip="entry.date" />
</li>
</div>
<li class="method-list-item">
<input aria-label="Method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}" />
<span class="entry-status-code" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">{{entry.status}}</span>
</li>
<li>
<input aria-label="URL" type="text" readonly :value="entry.url" placeholder="No URL" />
</li>
<li>
<input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" />
</li>
<div class="show-on-small-screen">
<li>
<input aria-label="URL" type="text" readonly :value="entry.url" placeholder="No URL" />
</li>
<li>
<input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" />
</li>
</div>
<transition name="smooth">
<div v-if="show" class="show-on-small-screen">
<li>
@@ -194,6 +198,14 @@
.virtual-list.filled {
min-height: 320px;
}
.labels {
display: none;
}
.entry {
border-bottom: 1px solid var(--brd-color);
}
}
</style>