feat(ui): center loaders

AxaFrance · Feb 17, 2021 · 0773363 · 0773363
1 parent f26bde0
commit 0773363
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 105 deletions.
diff --git a/src/components/Accounts/Accounts.svelte b/src/components/Accounts/Accounts.svelte
@@ -26,20 +26,29 @@
 	};
 </script>
 
+<Tabs
+	current={currentProvider}
+	onChange={provider => (currentProvider = provider)}
+	data={tabs}
+/>
+<div class="content">
+	<svelte:component this={views[currentProvider]} />
+</div>
+
 <style>
 	.content {
+		position: relative;
 		height: calc(100vh - 6rem);
 		flex: 1 0 auto;
 		padding: 1rem;
 		overflow: auto;
 		background-color: #4e4e4e;
 	}
-</style>
 
-<Tabs
-	current={currentProvider}
-	onChange={provider => (currentProvider = provider)}
-	data={tabs} />
-<div class="content">
-	<svelte:component this={views[currentProvider]} />
-</div>
+	.content :global(.loader, .error) {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translateX(-50%) translateY(-50%);
+	}
+</style>
diff --git a/src/components/AzureDevOps/AzureDevOps.svelte b/src/components/AzureDevOps/AzureDevOps.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
 	import { Service } from 'services/Service';
 	import { clientAuthenticated } from 'shared/stores/authentication.store';
-	import {
-		isFetchingData,
-		isLoading
-	} from 'shared/stores/default.store';
+	import { isFetchingData, isLoading } from 'shared/stores/default.store';
 	import { authorize } from 'shared/token';
 	import { ProviderEnum } from 'models/skizzle/ProviderEnum';
 	import AccountTitle from 'components/AccountTitle';
@@ -17,60 +14,33 @@
 
 	let search: string = '';
 
-	const onSearchSubmit = (repositories: RepositoryType[]) => (query: string): void => {
+	const onSearchSubmit = (repositories: RepositoryType[]) => (
+		query: string,
+	): void => {
 		search = query;
 
-		fetchedAzureDevOpsRepositories = repositories.filter(({projectName, name}) =>
-			name.toLocaleLowerCase().includes(search.toLocaleLowerCase()) ||
-			projectName.toLocaleLowerCase().includes(search.toLocaleLowerCase())
-		)
+		fetchedAzureDevOpsRepositories = repositories.filter(
+			({ projectName, name }) =>
+				name.toLocaleLowerCase().includes(search.toLocaleLowerCase()) ||
+				projectName.toLocaleLowerCase().includes(search.toLocaleLowerCase()),
+		);
 	};
 
 	const onSearchCancel = (): void => {
 		search = '';
 	};
-	
+
 	$: fetchedAzureDevOpsRepositories = [] as RepositoryType[];
 </script>
 
-<style>
-	section {
-		margin-bottom: 2rem;
-	}
-
-	div {
-		display: flex;
-	}
-
-	div section {
-		flex: 0 0 50%;
-		padding-left: 1rem;
-		padding-right: 1rem;
-	}
-
-	div section:first-child {
-		padding-left: 0;
-	}
-
-	div section:last-child {
-		padding-right: 0;
-	}
-
-	.intro {
-		margin-bottom: 1rem;
-		font-size: 0.8rem;
-		color: #ddd;
-	}
-</style>
-
 {#if $isLoading}
-	<p>Chargement de l'application...</p>
+	<p class="loader">Chargement de l'application...</p>
 {:else if $clientAuthenticated.isAzureDevOpsAuthenticated}
 	{#await Service.getProfile(ProviderEnum.AzureDevOps)}
-		<p>Chargement du profile</p>
+		<p class="loader">Chargement du profile...</p>
 	{:then profile}
 		{#await Service.getRepositories(ProviderEnum.AzureDevOps, { profile })}
-			<p>Chargement de la liste des repositories</p>
+			<p class="loader">Chargement de la liste des repositories...</p>
 		{:then repositories}
 			<section>
 				<AccountTitle>Votre compte Azure DevOps</AccountTitle>
@@ -79,31 +49,63 @@
 			<div>
 				<section>
 					<AccountTitle>Suivre un nouveau repository</AccountTitle>
-					<p class="intro">Cherchez le nom de son projet et/ou repository associé.</p>
+					<p class="intro">
+						Cherchez le nom de son projet et/ou repository associé.
+					</p>
 					<Search
 						onSubmit={onSearchSubmit(repositories)}
 						onCancel={onSearchCancel}
 						disabled={$isFetchingData}
-						placeholder="Rechercher un projet ou un repos" />
+						placeholder="Rechercher un projet ou un repos"
+					/>
 
 					{#if search}
-						<SearchResults
-							{search}
-							repos={fetchedAzureDevOpsRepositories} />
+						<SearchResults {search} repos={fetchedAzureDevOpsRepositories} />
 					{/if}
 				</section>
 				<section>
 					<FollowedRepositories {profile} />
 				</section>
 			</div>
 		{:catch}
-			<p>Fetching profile failed.</p>
+			<p class="error">Fetching profile failed.</p>
 		{/await}
 	{:catch}
-		<p>Fetching profile failed.</p>
+		<p class="error">Fetching profile failed.</p>
 	{/await}
 {:else}
 	<AddAccount
 		text="Ajouter un compte Azure DevOps"
-		onClick={() => authorize(ProviderEnum.AzureDevOps)} />
+		onClick={() => authorize(ProviderEnum.AzureDevOps)}
+	/>
 {/if}
+
+<style>
+	section {
+		margin-bottom: 2rem;
+	}
+
+	div {
+		display: flex;
+	}
+
+	div section {
+		flex: 0 0 50%;
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+
+	div section:first-child {
+		padding-left: 0;
+	}
+
+	div section:last-child {
+		padding-right: 0;
+	}
+
+	.intro {
+		margin-bottom: 1rem;
+		font-size: 0.8rem;
+		color: #ddd;
+	}
+</style>
diff --git a/src/components/Comment/Comment.svelte b/src/components/Comment/Comment.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import marked from 'marked'
+	import marked from 'marked';
 	import { Service } from 'services/Service';
 	import type { CommentType } from 'models/skizzle';
 
@@ -13,7 +13,10 @@
 		</div>
 	{/await}
 	<div class="content">
-		<h2>{comment.author.displayName} <small>{comment.date}</small></h2>
+		<h2>
+			{comment.author.displayName}
+			<small>{comment.date}</small>
+		</h2>
 		<div>{@html marked(comment.text)}</div>
 	</div>
 </div>
@@ -43,6 +46,42 @@
 		background-color: #4c4c4c;
 	}
 
+	.content :global(a) {
+		color: #ddd;
+	}
+
+	.content :global(a:hover) {
+		text-decoration: none;
+	}
+
+	.content :global(blockquote) {
+		font-style: italic;
+		padding-left: 1rem;
+		margin-bottom: 1rem;
+		border-left: 1px solid #ccc;
+	}
+
+	.content :global(ul, ol) {
+		padding-left: 1rem;
+	}
+
+	.content :global(img) {
+		margin: 0.2rem;
+	}
+
+	.content :global(p:not(:last-child)) {
+		margin-bottom: 0.5rem;
+	}
+
+	.content :global(code) {
+		display: inline-block;
+		margin: 0.1rem;
+		padding: 0.1rem 0.2rem;
+		color: #333;
+		font-size: 1rem;
+		background-color: #aaa;
+	}
+
 	.content:before {
 		content: '';
 		position: absolute;
@@ -57,13 +96,14 @@
 	}
 
 	h2 {
-		margin-bottom: 0.5rem;
+		margin-bottom: 1rem;
 		font-size: 1rem;
 	}
 
 	h2 small {
-		font-size: 0.8rem;
+		font-size: 0.7rem;
 		font-weight: normal;
+		color: #ccc;
 	}
 
 	h2 + div {

diff --git a/src/components/Github/Github.svelte b/src/components/Github/Github.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
 	import { Service } from 'services/Service';
 	import { clientAuthenticated } from 'shared/stores/authentication.store';
-	import {
-		isFetchingData,
-		isLoading,
-	} from 'shared/stores/default.store';
+	import { isFetchingData, isLoading } from 'shared/stores/default.store';
 	import { authorize } from 'shared/token';
 	import { ProviderEnum } from 'models/skizzle/ProviderEnum';
 	import AccountTitle from 'components/AccountTitle';
@@ -34,41 +31,11 @@
 	};
 </script>
 
-<style>
-	section {
-		margin-bottom: 2rem;
-	}
-
-	div {
-		display: flex;
-	}
-
-	div :global(section) {
-		flex: 0 0 50%;
-		padding-left: 1rem;
-		padding-right: 1rem;
-	}
-
-	div section:first-child {
-		padding-left: 0;
-	}
-
-	div section:last-child {
-		padding-right: 0;
-	}
-
-	.intro {
-		margin-bottom: 1rem;
-		font-size: 0.8rem;
-		color: #ddd;
-	}
-</style>
-
 {#if $isLoading}
-	<p>Chargement...</p>
+	<p class="loader">Chargement...</p>
 {:else if $clientAuthenticated.isGithubAuthenticated}
 	{#await Service.getProfile(ProviderEnum.Github)}
-		<p>Chargement...</p>
+		<p class="loader">Chargement...</p>
 	{:then profile}
 		<section>
 			<AccountTitle>Votre compte Github</AccountTitle>
@@ -83,21 +50,51 @@
 					onSubmit={onSearchSubmit}
 					onCancel={onSearchCancel}
 					disabled={$isFetchingData}
-					placeholder="Rechercher un repository" />
+					placeholder="Rechercher un repository"
+				/>
 
 				{#if search}
-					<SearchResults
-						{search}
-						repos={fetchedGithubRepositories} />
+					<SearchResults {search} repos={fetchedGithubRepositories} />
 				{/if}
 			</section>
 			<FollowedRepositories {profile} />
 		</div>
 	{:catch}
-		<p>Fetching profile failed.</p>
+		<p class="error">Fetching profile failed.</p>
 	{/await}
 {:else}
 	<AddAccount
 		text="Ajouter un compte Github"
-		onClick={() => authorize(ProviderEnum.Github)} />
+		onClick={() => authorize(ProviderEnum.Github)}
+	/>
 {/if}
+
+<style>
+	section {
+		margin-bottom: 2rem;
+	}
+
+	div {
+		display: flex;
+	}
+
+	div :global(section) {
+		flex: 0 0 50%;
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+
+	div section:first-child {
+		padding-left: 0;
+	}
+
+	div section:last-child {
+		padding-right: 0;
+	}
+
+	.intro {
+		margin-bottom: 1rem;
+		font-size: 0.8rem;
+		color: #ddd;
+	}
+</style>