Add Poll app
This commit is contained in:
Rotimi Best
@@ -69,7 +69,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</PageNav>
|
</PageNav>
|
||||||
|
|
||||||
<div bind:this={bodyRef} class="body">
|
<div bind:this={bodyRef} class="overflow-auto body">
|
||||||
{#each chats as chat}
|
{#each chats as chat}
|
||||||
<div class="pl-2 pb-4">
|
<div class="pl-2 pb-4">
|
||||||
<div class="flex items-center no-underline hover:underline text-black">
|
<div class="flex items-center no-underline hover:underline text-black">
|
||||||
@@ -102,8 +102,7 @@
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
.body {
|
.body {
|
||||||
overflow: auto;
|
height: 90%;
|
||||||
height: 80%;
|
|
||||||
}
|
}
|
||||||
.footer {
|
.footer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
export let name;
|
||||||
|
export let src;
|
||||||
|
export let className;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<img
|
||||||
|
alt={name}
|
||||||
|
{src}
|
||||||
|
class="w-10 h-10 rounded-full bg-light-blue-100 {className}"
|
||||||
|
/>
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<script>
|
||||||
|
import FormSection from "./FormSection.svelte";
|
||||||
|
import PrimaryButton from "../../../../PrimaryButton/index.svelte";
|
||||||
|
import { VARIANTS } from "../../../../PrimaryButton/constants";
|
||||||
|
|
||||||
|
export let title = "Poll";
|
||||||
|
export let onSubmit;
|
||||||
|
export let onCancel;
|
||||||
|
|
||||||
|
let values = {
|
||||||
|
question: "",
|
||||||
|
author: "",
|
||||||
|
isPublic: false,
|
||||||
|
expiration: "",
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: "",
|
||||||
|
selectedBy: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
function handleAddOptions() {
|
||||||
|
values = {
|
||||||
|
...values,
|
||||||
|
options: [
|
||||||
|
...values.options,
|
||||||
|
{
|
||||||
|
label: "",
|
||||||
|
selectedBy: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRemoveOptions(index) {
|
||||||
|
return () => {
|
||||||
|
values.options = values.options.filter((o, i) => i !== index);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function finishPoll() {
|
||||||
|
onSubmit(values);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="border rounded-md">
|
||||||
|
<div class="border-b-2 p-4 text-center">
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
<div class="p-3">
|
||||||
|
<FormSection label="Question" bind:value={values.question} />
|
||||||
|
<FormSection
|
||||||
|
label="Expiration"
|
||||||
|
bind:value={values.expiration}
|
||||||
|
type="date"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{#each values.options as option, index}
|
||||||
|
<FormSection
|
||||||
|
label={index === 0 && "Options"}
|
||||||
|
bind:value={option.label}
|
||||||
|
handleLabelButton={handleAddOptions}
|
||||||
|
handleInputButton={handleRemoveOptions(index)}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full flex justify-center mb-3">
|
||||||
|
<PrimaryButton label="Create poll" onClick={finishPoll} />
|
||||||
|
<PrimaryButton
|
||||||
|
label="Cancel"
|
||||||
|
variant={VARIANTS.OUTLINED}
|
||||||
|
onClick={onCancel}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
<script>
|
||||||
|
export let value;
|
||||||
|
export let label;
|
||||||
|
export let type = "text";
|
||||||
|
export let name = "text";
|
||||||
|
export let handleLabelButton;
|
||||||
|
export let handleInputButton;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
{#if label}
|
||||||
|
<p class="p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600">
|
||||||
|
{label}
|
||||||
|
|
||||||
|
{#if typeof handleLabelButton === "function"}
|
||||||
|
<button class="text-xl px-3 ml-5" on:click={handleLabelButton}>
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="w-full">
|
||||||
|
{#if type === "text"}
|
||||||
|
<input type="text" {name} class="p-2 rounded-md w-4/5" bind:value />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if type === "date"}
|
||||||
|
<input type="date" {name} class="p-2 rounded-md w-4/5" bind:value />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if typeof handleInputButton === "function"}
|
||||||
|
<button class="text-xl px-3 ml-5" on:click={handleInputButton}>
|
||||||
|
-
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
<p class="p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600">
|
||||||
|
<slot />
|
||||||
|
</p>
|
||||||
@@ -0,0 +1,210 @@
|
|||||||
|
<script>
|
||||||
|
import Label from "./Label.svelte";
|
||||||
|
import Avatar from "./Avatar.svelte";
|
||||||
|
|
||||||
|
export let poll = {};
|
||||||
|
export let onSelect = () => {};
|
||||||
|
export let handlePollDelete = () => {};
|
||||||
|
export let currentUserId;
|
||||||
|
let viewResult = false;
|
||||||
|
let selectedOptionToView;
|
||||||
|
let isAuthor = false;
|
||||||
|
let totalVotes = 0;
|
||||||
|
let hasUserVoted = false;
|
||||||
|
|
||||||
|
function handleSelect(optionIndex) {
|
||||||
|
return () => {
|
||||||
|
onSelect(optionIndex);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSelectedUsers(users) {
|
||||||
|
return users.map((o) => o.label).join(", ");
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTotalVotes(options) {
|
||||||
|
return options.reduce((acc, cur) => acc + cur.selectedBy.length, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculatePercent(options, currentOption) {
|
||||||
|
const totalVoteOfAllOptions = getTotalVotes(options);
|
||||||
|
const totalVotesOfCurrentOption = currentOption.selectedBy.length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
Math.round((totalVotesOfCurrentOption / totalVoteOfAllOptions) * 100) || 0
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function didUserSelect(option) {
|
||||||
|
return option.selectedBy.find((user) => user.value === currentUserId);
|
||||||
|
}
|
||||||
|
|
||||||
|
$: isAuthor = currentUserId === poll.author.value;
|
||||||
|
$: totalVotes = getTotalVotes(poll.options);
|
||||||
|
$: {
|
||||||
|
hasUserVoted = poll.options.some((option) =>
|
||||||
|
option.selectedBy.find((u) => u.value === currentUserId)
|
||||||
|
);
|
||||||
|
console.log("hasUserVoted", hasUserVoted, currentUserId);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="p-4 bg-white-100 border-2 rounded-md mb-3">
|
||||||
|
{#if selectedOptionToView}
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center mb-5">
|
||||||
|
<button
|
||||||
|
class="text-xl w-10 px-3"
|
||||||
|
on:click={() => (selectedOptionToView = null)}
|
||||||
|
>
|
||||||
|
{`<`}
|
||||||
|
</button>
|
||||||
|
<div class="flex-grow text-center">
|
||||||
|
<h3 class="font-bold">Voted</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{#each selectedOptionToView.selectedBy as user}
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<Avatar src={user.avatar} name={user.label} className="mr-2" />
|
||||||
|
<p>
|
||||||
|
{user.label}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="flex mb-3 justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-bold">
|
||||||
|
{poll.question}
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm italic">
|
||||||
|
Created by <a
|
||||||
|
class="text-blue-500"
|
||||||
|
href="https://twitter.com/rotimi_best"
|
||||||
|
target="_blank">@{poll.author.label}</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if isAuthor}
|
||||||
|
<div class="flex mb-3 justify-end items-center">
|
||||||
|
<label class="mr-2 font-bold" for="user-select">Status:</label>
|
||||||
|
|
||||||
|
<select name="users" id="user-select" bind:value={poll.status}>
|
||||||
|
<option value="draft">Draft</option>
|
||||||
|
<option value="Public">Public</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if viewResult}
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="mr-5">
|
||||||
|
<Label>Expiration</Label>
|
||||||
|
<p class="text-sm text-gray-600 mb-4">
|
||||||
|
{poll.expiration || "Today"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<Label>Total Votes</Label>
|
||||||
|
<p class="text-sm text-gray-600 mb-4">
|
||||||
|
{totalVotes}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Label>Responses</Label>
|
||||||
|
{#each poll.options as option, index}
|
||||||
|
<div class="border-b p-5">
|
||||||
|
<p>
|
||||||
|
{option.label}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-4/5 h-2 bg-gray-200 relative">
|
||||||
|
<span
|
||||||
|
class="absolute top-0 left-0 bg-blue-700 h-full"
|
||||||
|
style="width: {calculatePercent(poll.options, option)}%;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{#if option.selectedBy.length}
|
||||||
|
<button
|
||||||
|
class="text-xl px-3 ml-5"
|
||||||
|
on:click={() => (selectedOptionToView = option)}
|
||||||
|
>
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
{#each option.selectedBy.slice(0, 3) as user}
|
||||||
|
<Avatar src={user.avatar} name={user.label} className="mr-2" />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
{:else}
|
||||||
|
{#each poll.options as option, index}
|
||||||
|
<button
|
||||||
|
class="bg-white rounded-md border-2 border-gray-500 {didUserSelect(
|
||||||
|
option
|
||||||
|
) &&
|
||||||
|
'focus:border-blue-700 border-blue-700'} text-black p-2 w-full mb-3 text-left relative"
|
||||||
|
on:click={handleSelect(index)}
|
||||||
|
>
|
||||||
|
{#if hasUserVoted}
|
||||||
|
<span
|
||||||
|
class="progress absolute top-0 left-0 {didUserSelect(option)
|
||||||
|
? 'bg-blue-700'
|
||||||
|
: 'bg-gray-300'} h-full bg-opacity-25 "
|
||||||
|
style="width: {calculatePercent(poll.options, option)}%;"
|
||||||
|
/>
|
||||||
|
<strong class="mr-3"
|
||||||
|
>{calculatePercent(poll.options, option)}%</strong
|
||||||
|
>
|
||||||
|
{/if}
|
||||||
|
{option.label}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
<div class="flex items-center">
|
||||||
|
<p class="text-sm text-gray-600">
|
||||||
|
Expires: {poll.expiration || "Today"}
|
||||||
|
</p>
|
||||||
|
<span class="mx-2">|</span>
|
||||||
|
<p class="text-sm text-gray-600">
|
||||||
|
Voted: {totalVotes}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if isAuthor}
|
||||||
|
<div class="w-full text-center mt-3">
|
||||||
|
<button
|
||||||
|
class="px-5 py-2 bg-blue-700 text-white"
|
||||||
|
on:click={() => (viewResult = !viewResult)}
|
||||||
|
>
|
||||||
|
{#if viewResult}
|
||||||
|
Back to poll
|
||||||
|
{:else}
|
||||||
|
View results
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="px-5 py-2 bg-red-500 text-white"
|
||||||
|
on:click={handlePollDelete}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.progress {
|
||||||
|
transition: width 0.5s linear;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
export let tabs = [];
|
||||||
|
|
||||||
|
export let selectedTab;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
{#each tabs as tab}
|
||||||
|
<button
|
||||||
|
class="mr-3 pb-2 border-t-0 border-l-0 border-r-0 {selectedTab ===
|
||||||
|
tab.value
|
||||||
|
? 'border-b-4 border-indigo-600 focus:border-indigo-600'
|
||||||
|
: 'border-b-0'}"
|
||||||
|
on:click={() => (selectedTab = tab.value)}
|
||||||
|
>
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
@@ -1,8 +1,148 @@
|
|||||||
<script>
|
<script>
|
||||||
import PageNav from "../../../PageNav/index.svelte";
|
import PageNav from "../../../PageNav/index.svelte";
|
||||||
import CloseButton from "../../../Buttons/Close/index.svelte";
|
import CloseButton from "../../../Buttons/Close/index.svelte";
|
||||||
|
import PrimaryButton from "../../../PrimaryButton/index.svelte";
|
||||||
|
import { VARIANTS } from "../../../PrimaryButton/constants";
|
||||||
|
import CreatePollForm from "./components/CreatePollForm.svelte";
|
||||||
|
import Poll from "./components/Poll.svelte";
|
||||||
|
import Tabs from "./components/Tabs.svelte";
|
||||||
|
|
||||||
export let handleClose;
|
export let handleClose;
|
||||||
|
|
||||||
|
const users = [
|
||||||
|
{
|
||||||
|
label: "Rich Harris",
|
||||||
|
value: "rich-harris",
|
||||||
|
avatar: "https://i.pravatar.cc/150?img=1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Linus Torvalds",
|
||||||
|
value: "linus-torvalds",
|
||||||
|
avatar: "https://i.pravatar.cc/150?img=2",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Elon Musk",
|
||||||
|
value: "elon-musk",
|
||||||
|
avatar: "https://i.pravatar.cc/150?img=3",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Satoshi Nakamoto",
|
||||||
|
value: "satoshi-nakamoto",
|
||||||
|
avatar: "https://i.pravatar.cc/150?img=4",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const tabs = [
|
||||||
|
{
|
||||||
|
label: "My polls",
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Other polls",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
let selectedTab = 0;
|
||||||
|
let userId = users[0].value;
|
||||||
|
let shouldCreatePoll = false;
|
||||||
|
let polls = [
|
||||||
|
{
|
||||||
|
question: "Who is the creator of Svelte?",
|
||||||
|
author: users[0],
|
||||||
|
status: "draft", // public
|
||||||
|
expiration: new Date().toDateString(),
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: "Dan Abrahmov",
|
||||||
|
selectedBy: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Evan You",
|
||||||
|
selectedBy: [
|
||||||
|
{
|
||||||
|
label: "Rich Harris",
|
||||||
|
value: "rich-harris",
|
||||||
|
avatar: "https://i.pravatar.cc/150?img=1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Linus Torvalds",
|
||||||
|
value: "linus-torvalds",
|
||||||
|
avatar: "https://i.pravatar.cc/150?img=2",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Rich Harris",
|
||||||
|
selectedBy: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Yehuda Katz",
|
||||||
|
selectedBy: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function handleCreatePoll() {
|
||||||
|
shouldCreatePoll = !shouldCreatePoll;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePollCreate(poll) {
|
||||||
|
if (poll) {
|
||||||
|
polls = [
|
||||||
|
{
|
||||||
|
...poll,
|
||||||
|
author: users.find((u) => u.value === userId),
|
||||||
|
},
|
||||||
|
...polls,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
handleCreatePoll();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePollDelete(pollId) {
|
||||||
|
return () => {
|
||||||
|
polls = [...polls.filter((p, i) => i !== pollId)];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleVote(pollId) {
|
||||||
|
return (optionId) => {
|
||||||
|
polls = [
|
||||||
|
...polls.map((poll, index) => {
|
||||||
|
if (index === pollId) {
|
||||||
|
poll.options = poll.options.map((option, optionIndex) => {
|
||||||
|
if (optionIndex === optionId) {
|
||||||
|
if (option.selectedBy.find((user) => user.value === userId)) {
|
||||||
|
// Unselect if already selected
|
||||||
|
// <<update: let me keep this commented so after a user selects an answer it can't be unselected>>
|
||||||
|
// option.selectedBy = option.selectedBy.filter(user => user.value !== userId)
|
||||||
|
} else {
|
||||||
|
// Select if already selected
|
||||||
|
option.selectedBy = [
|
||||||
|
...option.selectedBy,
|
||||||
|
users.find((user) => user.value === userId),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
} else if (
|
||||||
|
option.selectedBy.find((user) => user.value === userId)
|
||||||
|
) {
|
||||||
|
// This makes the user to select only one option
|
||||||
|
option.selectedBy = option.selectedBy.filter(
|
||||||
|
(user) => user.value !== userId
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return option;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return poll;
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
};
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<PageNav title="Poll" overidableStyle="padding: 0 10px">
|
<PageNav title="Poll" overidableStyle="padding: 0 10px">
|
||||||
@@ -10,3 +150,47 @@
|
|||||||
<CloseButton onClick={handleClose} />
|
<CloseButton onClick={handleClose} />
|
||||||
</div>
|
</div>
|
||||||
</PageNav>
|
</PageNav>
|
||||||
|
|
||||||
|
<div class="m-2 overlow-auto">
|
||||||
|
{#if shouldCreatePoll}
|
||||||
|
<CreatePollForm onSubmit={handlePollCreate} onCancel={handleCreatePoll} />
|
||||||
|
{:else}
|
||||||
|
<div>
|
||||||
|
<Tabs {tabs} bind:selectedTab />
|
||||||
|
|
||||||
|
{#if selectedTab === tabs[0].value}
|
||||||
|
<div class="w-full flex justify-center mb-3">
|
||||||
|
<PrimaryButton
|
||||||
|
label="Create poll"
|
||||||
|
variant={VARIANTS.CONTAINED}
|
||||||
|
onClick={handleCreatePoll}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#each polls as poll, index}
|
||||||
|
{#if selectedTab === tabs[0].value && poll.author.value === userId}
|
||||||
|
<Poll
|
||||||
|
bind:poll
|
||||||
|
onSelect={handleVote(index)}
|
||||||
|
handlePollDelete={handlePollDelete(index)}
|
||||||
|
currentUserId={userId}
|
||||||
|
/>
|
||||||
|
{:else if selectedTab === tabs[1].value && poll.author.value !== userId}
|
||||||
|
<Poll
|
||||||
|
bind:poll
|
||||||
|
onSelect={handleVote(index)}
|
||||||
|
handlePollDelete={handlePollDelete(index)}
|
||||||
|
currentUserId={userId}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="bg-gray-100 border rounded-md h-60 flex items-center justify-center "
|
||||||
|
>
|
||||||
|
<h2 class="text-xl font-bold">No polls to display</h2>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|||||||
@@ -123,9 +123,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
& .app {
|
& .app {
|
||||||
width: 300px;
|
width: 400px;
|
||||||
transition: all 1s ease-out;
|
transition: all 1s ease-out;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user