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

5
assets/css/styles.scss
View File

@@ -597,6 +597,11 @@ ol {
margin: 4px 0 4px; margin: 4px 0 4px;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
ul,
ol {
margin: 0;
}
} }
ul li, ul li,

18
components/history.vue
View File

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