forked from trent_larson/crowd-funder-for-time-pwa
UI tweaks
This commit is contained in:
Jose Olarte III
@@ -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: </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(" ", " ") }}
|
||||
</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…
|
||||
</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
|
||||
|
||||
@@ -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" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user