Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Vue Rewrite] Basic Mobile accessible interface #2371

Merged
merged 6 commits into from
Oct 16, 2023
Merged

[Vue Rewrite] Basic Mobile accessible interface #2371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
06e373b
start on mobile view
devlinjunker Oct 5, 2023
2ed0df3
add box-shadow and other cleanups
devlinjunker Oct 5, 2023
2309c80
remove unecessary class
devlinjunker Oct 5, 2023
e737236
smaller date font size
devlinjunker Oct 5, 2023
f576eb4
fix flex properties to avoid media queries
devlinjunker Oct 10, 2023
dff06a4
Merge branch 'vue-rewrite' into mobile-friendly-styles
devlinjunker Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,19 +104,18 @@ export default Vue.extend({
display: flex;
}

#content-display {
display: flex;
flex-direction: row;
.route-container {
height: 100%;
}

#content-display.playing {
height: calc(100vh - 98px)
#content-display {
display: flex;
flex-direction: row;
flex: 1;
min-height: 0;
}

.podcast {
position: absolute;
bottom: 0px;
height: 40px;
display: flex;
background-color: #474747;
Expand Down
4 changes: 4 additions & 0 deletions src/components/feed-display/FeedItemDisplay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,9 @@
<img v-else :src="item.mediaThumbnail" alt="">
</div>

<div v-if="item.mediaDescription" class="enclosure description" v-html="item.mediaDescription" />

Check warning on line 88 in src/components/feed-display/FeedItemDisplay.vue

View workflow job for this annotation

GitHub Actions / eslint node 

'v-html' directive can lead to XSS attack

Check warning on line 88 in src/components/feed-display/FeedItemDisplay.vue

View workflow job for this annotation

GitHub Actions / eslint 

'v-html' directive can lead to XSS attack

<div class="body" :dir="item.rtl && 'rtl'" v-html="item.body" />

Check warning on line 90 in src/components/feed-display/FeedItemDisplay.vue

View workflow job for this annotation

GitHub Actions / eslint node 

'v-html' directive can lead to XSS attack

Check warning on line 90 in src/components/feed-display/FeedItemDisplay.vue

View workflow job for this annotation

GitHub Actions / eslint 

'v-html' directive can lead to XSS attack
</div>
</div>
</template>
Expand Down Expand Up @@ -274,6 +274,10 @@
font-size: 17px;
}

.article table {
white-space: unset;
}

.action-bar {
padding: 0px 20px 0px 20px;

Expand Down
36 changes: 33 additions & 3 deletions src/components/feed-display/FeedItemDisplayList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,9 +181,10 @@ export default Vue.extend({

<style scoped>
.feed-item-display-list {
height: 100%;
display: flex;
flex-direction: column;
overflow-y: hidden;
height: 100%;
}

.virtual-scroll {
Expand All @@ -194,12 +195,41 @@ export default Vue.extend({
.feed-item-display-container {
display: flex;
height: 100%;
overflow-y: hidden;
}

@media only screen and (min-width: 320px) {
.virtual-scroll {
flex: 1 1.2 auto;
}

.feed-item-display-container {
flex-direction: column;
}

.feed-item-container {
flex: 1 1 1000px;
max-height: calc(100vh - 200px)
}
}

@media only screen and (min-width: 768px) {
.feed-item-display-container {
flex-direction: row;
}

.feed-item-container {
width: 50%;
max-height: unset;
}
}

.feed-item-container {
max-width: 50%;
overflow-y: hidden;
height: calc(100vh - 50px - 50px - 10px)
-webkit-box-shadow: 1px -1px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px -1px 5px 0px rgba(0,0,0,0.75);
box-shadow: 1px -1px 5px 0px rgba(0,0,0,0.75);
border-top: 1px solid var(--color-border);
}

.header {
Expand Down
16 changes: 12 additions & 4 deletions src/components/feed-display/FeedItemRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<div class="title-container" :class="{ 'unread': item.unread }">
<span style="white-space: nowrap" :dir="item.rtl && 'rtl'">
{{ item.title }}
<span class="intro" v-html="item.intro" />

Check warning on line 19 in src/components/feed-display/FeedItemRow.vue

View workflow job for this annotation

GitHub Actions / eslint node 

'v-html' directive can lead to XSS attack

Check warning on line 19 in src/components/feed-display/FeedItemRow.vue

View workflow job for this annotation

GitHub Actions / eslint 

'v-html' directive can lead to XSS attack
</span>
</div>
<div class="date-container">
Expand Down Expand Up @@ -152,10 +152,6 @@
</script>

<style>
.feed-item-container {
border-bottom: 1px solid #222;
}

.feed-item-row {
display: flex; padding: 5px 10px;
}
Expand Down Expand Up @@ -195,6 +191,18 @@
margin-left: 20px;
}

@media only screen and (min-width: 320px) {
.feed-item-row .date-container {
font-size: small;
}
}

@media only screen and (min-width: 768px) {
.feed-item-row .date-container {
font-size: medium;
}
}

.feed-item-row .date-container {
color: var(--color-text-lighter);
padding-left: 4px;
Expand Down
1 change: 1 addition & 0 deletions templates/part.content.warnings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
box-shadow: 0 0 6px 0 var(--color-box-shadow);
border-radius: var(--border-radius);
display: flex;
max-width: 85%
}

#cron-warning a {
Expand Down
Loading