trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 17 Releases 5 Wiki Activity
Labels Milestones
New Pull Request

feat: disable zoom and fix iOS viewport issues #206

Merged
jose merged 3 commits from ios-disable-zoom into master 3 days ago
Conversation 1 Commits 3 Files Changed 9
9 changed files with 55 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      index.html
  2. 18
      src/assets/styles/tailwind.css
  3. 7
      src/components/ActivityListItem.vue
  4. 2
      src/components/ContactListItem.vue
  5. 11
      src/views/ClaimView.vue
  6. 2
      src/views/DIDView.vue
  7. 4
      src/views/DiscoverView.vue
  8. 21
      src/views/ProjectViewView.vue
  9. 8
      src/views/ProjectsView.vue

4
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" /> <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no, interactive-widget=overlays-content" />
<!-- CORS headers removed to allow images from any domain --> <!-- CORS headers removed to allow images from any domain -->
@ -13,4 +13,4 @@
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

18
src/assets/styles/tailwind.css
View File

@ -7,6 +7,24 @@
html { html {
font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important; font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
} }
/* Fix iOS viewport height changes when keyboard appears/disappears */
html, body {
height: 100%;
height: 100vh;
height: 100dvh; /* Dynamic viewport height for better mobile support */
overflow: hidden; /* Disable all scrolling on html and body */
position: fixed; /* Force fixed positioning to prevent viewport changes */
width: 100%;
top: 0;
left: 0;
}
#app {
height: 100vh;
height: 100dvh;
overflow-y: auto;
}
} }
@layer components { @layer components {

7
src/components/ActivityListItem.vue
View File

@ -78,8 +78,11 @@
</div> </div>
<!-- Description --> <!-- Description -->
<p class="font-medium"> <p class="font-medium overflow-hidden">
<a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)"> <a
class="block cursor-pointer overflow-hidden text-ellipsis"
@click="emitLoadClaim(record.jwtId)"
>
<vue-markdown <vue-markdown
:source="truncatedDescription" :source="truncatedDescription"
class="markdown-content" class="markdown-content"

2
src/components/ContactListItem.vue
View File

@ -46,7 +46,7 @@
<span class="text-xs truncate">{{ contact.did }}</span> <span class="text-xs truncate">{{ contact.did }}</span>
</div> </div>
<div class="text-sm"> <div class="text-sm truncate">
{{ contact.notes }} {{ contact.notes }}
</div> </div>
</div> </div>

11
src/views/ClaimView.vue
View File

@ -88,19 +88,22 @@
</button> </button>
</div> </div>
</div> </div>
<div class="text-sm"> <div class="text-sm overflow-hidden">
<div data-testId="description"> <div
data-testId="description"
class="overflow-hidden text-ellipsis"
>
<font-awesome icon="message" class="fa-fw text-slate-400" /> <font-awesome icon="message" class="fa-fw text-slate-400" />
<vue-markdown <vue-markdown
:source="claimDescription" :source="claimDescription"
class="markdown-content" class="markdown-content"
/> />
</div> </div>
<div> <div class="overflow-hidden text-ellipsis">
<font-awesome icon="user" class="fa-fw text-slate-400" /> <font-awesome icon="user" class="fa-fw text-slate-400" />
{{ didInfo(veriClaim.issuer) }} {{ didInfo(veriClaim.issuer) }}
</div> </div>
<div> <div class="overflow-hidden text-ellipsis">
<font-awesome icon="calendar" class="fa-fw text-slate-400" /> <font-awesome icon="calendar" class="fa-fw text-slate-400" />
Recorded Recorded
{{ formattedIssueDate }} {{ formattedIssueDate }}

2
src/views/DIDView.vue
View File

@ -34,7 +34,7 @@
class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4" class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"
> >
<div> <div>
<h2 class="text-xl font-semibold"> <h2 class="text-xl font-semibold overflow-hidden text-ellipsis">
{{ contactFromDid?.name || "(no name)" }} {{ contactFromDid?.name || "(no name)" }}
<router-link <router-link
:to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }" :to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"

4
src/views/DiscoverView.vue
View File

@ -282,8 +282,8 @@
/> />
</div> </div>
<div class="grow"> <div class="grow overflow-hidden">
<h2 class="text-base font-semibold"> <h2 class="text-base font-semibold truncate">
{{ project.name || unnamedProject }} {{ project.name || unnamedProject }}
</h2> </h2>
<div class="text-sm"> <div class="text-sm">

21
src/views/ProjectViewView.vue
View File

@ -28,7 +28,7 @@
<font-awesome icon="question" class="block text-center w-[1em]" /> <font-awesome icon="question" class="block text-center w-[1em]" />
</router-link> </router-link>
</div> </div>
<h2 class="text-center text-lg font-normal"> <h2 class="text-center text-lg font-normal overflow-hidden text-ellipsis">
{{ name }} {{ name }}
<button <button
v-if="activeDid === issuer || activeDid === agentDid" v-if="activeDid === issuer || activeDid === agentDid"
@ -157,7 +157,7 @@
</div> </div>
<div class="text-sm text-slate-500"> <div class="text-sm text-slate-500">
<div v-if="!expanded"> <div v-if="!expanded" class="overflow-hidden text-ellipsis">
<vue-markdown <vue-markdown
:source="truncatedDesc" :source="truncatedDesc"
class="mb-4 markdown-content" class="mb-4 markdown-content"
@ -169,7 +169,7 @@
>... Read More</a >... Read More</a
> >
</div> </div>
<div v-else> <div v-else class="overflow-hidden text-ellipsis">
<vue-markdown :source="description" class="mb-4 markdown-content" /> <vue-markdown :source="description" class="mb-4 markdown-content" />
<a <a
v-if="description.length >= truncateLength" v-if="description.length >= truncateLength"
@ -308,7 +308,10 @@
/>{{ offer.amount }} />{{ offer.amount }}
</span> </span>
</div> </div>
<div v-if="offer.objectDescription" class="text-slate-500"> <div
v-if="offer.objectDescription"
class="text-slate-500 overflow-hidden text-ellipsis"
>
<font-awesome icon="comment" class="fa-fw text-slate-400" /> <font-awesome icon="comment" class="fa-fw text-slate-400" />
{{ offer.objectDescription }} {{ offer.objectDescription }}
</div> </div>
@ -450,7 +453,10 @@
<font-awesome icon="calendar" class="fa-fw text-slate-400" /> <font-awesome icon="calendar" class="fa-fw text-slate-400" />
{{ give.issuedAt?.substring(0, 10) }} {{ give.issuedAt?.substring(0, 10) }}
</div> </div>
<div v-if="give.description" class="text-slate-500"> <div
v-if="give.description"
class="text-slate-500 overflow-hidden text-ellipsis"
>
<font-awesome icon="comment" class="fa-fw text-slate-400" /> <font-awesome icon="comment" class="fa-fw text-slate-400" />
{{ give.description }} {{ give.description }}
</div> </div>
@ -557,7 +563,10 @@
<font-awesome icon="calendar" class="fa-fw text-slate-400" /> <font-awesome icon="calendar" class="fa-fw text-slate-400" />
{{ give.issuedAt?.substring(0, 10) }} {{ give.issuedAt?.substring(0, 10) }}
</div> </div>
<div v-if="give.description" class="text-slate-500"> <div
v-if="give.description"
class="text-slate-500 overflow-hidden text-ellipsis"
>
<font-awesome icon="comment" class="fa-fw text-slate-400" /> <font-awesome icon="comment" class="fa-fw text-slate-400" />
{{ give.description }} {{ give.description }}
</div> </div>

8
src/views/ProjectsView.vue
View File

@ -118,8 +118,8 @@
/> />
</div> </div>
<div> <div class="overflow-hidden">
<div> <div class="text-sm truncate">
To To
{{ {{
offer.fulfillsPlanHandleId offer.fulfillsPlanHandleId
@ -132,7 +132,7 @@
) )
}} }}
</div> </div>
<div> <div class="truncate">
{{ offer.objectDescription }} {{ offer.objectDescription }}
</div> </div>
@ -254,7 +254,7 @@
</div> </div>
<div class="grow overflow-hidden"> <div class="grow overflow-hidden">
<h2 class="text-base font-semibold"> <h2 class="text-base font-semibold truncate">
{{ project.name || unnamedProject }} {{ project.name || unnamedProject }}
</h2> </h2>
<div class="text-sm truncate"> <div class="text-sm truncate">

Write Preview
Loading…
Cancel
Save