trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 11 Releases 5 Wiki Activity
Browse Source

UI tweaks

pull/133/head
Jose Olarte III 3 weeks ago
parent
eb5c9565a6
commit
d14635c44d
2 changed files with 52 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 67
      src/views/AccountViewView.vue
  2. 20
      src/views/ContactQRScanShowView.vue

67
src/views/AccountViewView.vue
View File

@ -94,25 +94,40 @@
</span>
<div v-else class="text-center">
<template v-if="isRegistered">
<div class @click="openImageDialog()">
<div class="inline-block text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md" @click="openImageDialog()">
<font-awesome
icon="image-portrait"
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-l"
icon="user"
class="fa-fw"
/>
<font-awesome
icon="camera"
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-r"
class="fa-fw"
/>
</div>
</template>
<template v-else>
<div class="text-center text-lg text-slate-500 py-8">Register to Upload a Photo</div>
<div
id="noticeBeforeUpload"
class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3"
role="alert"
aria-live="polite"
>
<p class="mb-2">
Before you can upload a photo, a friend needs to register you.
</p>
<router-link
:to="{ name: 'contact-qr' }"
class="inline-block text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
>
Share Your Info
</router-link>
</div>
</template>
</div>
<ImageMethodDialog ref="imageMethodDialog" :isRegistered="isRegistered" />
</div>
<div class="mt-6">
<div class="flex justify-center text-center">
<div class="mt-4">
<div class="flex justify-center text-center text-sm leading-tight mb-1">
People {{ profileImageUrl ? "without your image" : "" }} see this
<br />
(if you've let them see your activity):
@ -146,13 +161,13 @@
</div>
</div>
<div class="text-slate-500 text-sm font-bold">ID</div>
<div
class="text-sm text-slate-500 flex justify-start items-center mb-1"
class="text-sm text-slate-500 flex justify-start items-center mt-2 mb-1"
data-testId="didWrapper"
role="region"
aria-label="Your Identifier"
>
<div class="font-bold">ID:&nbsp;</div>
<code class="truncate" aria-label="Your DID">{{ activeDid }}</code>
<button
class="ml-2"
@ -185,8 +200,8 @@
role="alert"
aria-live="polite"
>
<p class="mb-4">
<b>Note:</b> Before you can publicly announce a new project or time
<p class="mb-2">
Before you can publicly announce a new project or time
commitment, a friend needs to register you.
</p>
<router-link
@ -208,7 +223,7 @@
<div>
Reminder Notification
<button
class="text-slate-400 fa-fw ml-2 cursor-pointer"
class="text-slate-400 fa-fw cursor-pointer"
@click.stop="showReminderNotificationInfo"
aria-label="Learn more about reminder notifications"
>
@ -243,7 +258,7 @@
New Activity Notification
<font-awesome
icon="question-circle"
class="text-slate-400 fa-fw ml-2 cursor-pointer"
class="text-slate-400 fa-fw cursor-pointer"
@click.stop="showNewActivityNotificationInfo"
/>
</div>
@ -269,21 +284,23 @@
<div v-if="notifyingNewActivityTime" class="w-full text-right">
{{ notifyingNewActivityTime.replace(" ", "&nbsp;") }}
</div>
<router-link class="pl-4 text-sm text-blue-500" to="/help-notifications">
Troubleshoot your notifications.
</router-link>
<div class="mt-2 text-center">
<router-link class="text-sm text-blue-500" to="/help-notifications">
Troubleshoot your notifications&hellip;
</router-link>
</div>
</section>
<PushNotificationPermission ref="pushNotificationPermission" />
<section
id="sectionSearchLocation"
class="flex justify-between bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
aria-labelledby="searchLocationHeading"
>
<h2 id="searchLocationHeading" class="mb-2 font-bold">Location for Searches</h2>
<router-link
:to="{ name: 'search-area' }"
class="text-m bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mb-2"
class="block w-full text-center bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
>
{{ isSearchAreasSet ? "Change" : "Set" }} Search Area…
</router-link>
@ -295,10 +312,10 @@
class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
aria-labelledby="userProfileHeading"
>
<h2 id="userProfileHeading" class="flex items-center mb-2">
<span class="font-bold">Public Profile</span>
<h2 id="userProfileHeading" class="mb-2 font-bold">
Public Profile
<button
class="text-slate-400 fa-fw ml-2 cursor-pointer"
class="text-slate-400 fa-fw cursor-pointer"
@click="showProfileInfo"
aria-label="Learn more about public profile"
>
@ -353,9 +370,9 @@
</l-map>
</div>
<div v-if="!loadingProfile && !savingProfile">
<div class="flex justify-between items-center">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-4">
<button
class="mt-2 px-4 py-2 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
class="px-4 py-2 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
:disabled="loadingProfile || savingProfile"
:class="{
'opacity-50 cursor-not-allowed': loadingProfile || savingProfile,
@ -365,7 +382,7 @@
Save Profile
</button>
<button
class="mt-2 px-4 py-2 bg-gradient-to-b from-red-400 to-red-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
class="px-4 py-2 bg-gradient-to-b from-red-400 to-red-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
:disabled="loadingProfile || savingProfile"
:class="{
'opacity-50 cursor-not-allowed':
@ -436,7 +453,7 @@
</p>
</div>
<button
class="block float-right w-fit text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mt-2"
class="block w-full text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mt-4"
@click="checkLimits()"
>
Recheck Limits

20
src/views/ContactQRScanShowView.vue
View File

@ -23,20 +23,20 @@
</h1>
</div>
<p
<div
v-if="!givenName"
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 my-4"
class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 my-4"
>
<span class="text-red">Beware!</span>
You aren't sharing your name, so quickly
<br />
<span
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md"
<p class="mb-2">
<b>Note:</b> your identity currently does <b>not</b> include a name.
</p>
<button
class="inline-block text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
@click="openUserNameDialog"
>
click here to set it for them.
</span>
</p>
Set Your Name
</button>
</div>
<UserNameDialog ref="userNameDialog" />

Write Preview
Loading…
Cancel
Save