Skip to content

Arrange/collapsible html #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ajoju wants to merge 6 commits into
base: development
Choose a base branch
from
Open

Arrange/collapsible html #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
45bc7bf
feature: Modified the content
ajoju Sep 18, 2023
c6db8f2
feature: Updated the content
ajoju Sep 18, 2023
4ecdec9
feature: Changed the messy content into properly arranged and modifie…
ajoju Sep 18, 2023
a83729e
feature: ReUpdated the content
ajoju Sep 18, 2023
1308a12
feature:revised and arranged CollapdibleAntD
ajoju Oct 6, 2023
2e219f7
feature:revised and arranged CollapsibleHTML
ajoju Oct 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 36 additions & 88 deletions art-gallery-frontend/src/components/CollapsibleMenuAntD.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,108 +1,62 @@
<template>
<div>
<a-menu
v-model:openKeys="openKeys"
v-model:selectedKeys="current"
class="nav-menu-dropdown"
mode="inline"
@click="handleClick"
>
<div>
<a-sub-menu key="sub-artworks">
<template #title>
<span>artworks</span>
</template>
<a-menu-item key="artwork-of-day">
<router-link to="/artworkofday" class="nav-sub">
<span>Artwork of the Day</span>
</router-link>
</a-menu-item>
<a-menu-item key="artworks-list">
<router-link to="/artworks" class="nav-sub">
<span>List of Artworks</span>
</router-link></a-menu-item
>
</a-sub-menu>
<a-sub-menu key="sub-culture">
<template #title>
<span>art & culture</span>
</template>
<a-menu-item key="symbols"><span class="nav-sub">Symbols</span></a-menu-item>
<a-menu-item key="artist-of-day">
<router-link to="/artistofday" class="nav-sub">
<span>Artist of the Day</span>
</router-link>
</a-menu-item>
<a-menu-item key="art-facts"
><span class="nav-sub">Aboriginal Art Facts</span></a-menu-item
>
</a-sub-menu>
<a-sub-menu key="sub-exhibitions">
<template #title>
<span>exhibitions</span>
</template>
<a-menu-item key="exhibition-current">
<router-link to="/exhibition" class="nav-sub">
<span>Current Exhibitions</span>
</router-link>
</a-menu-item>
<a-menu-item key="exhibition-past"
><span class="nav-sub">Past Exhibitions</span></a-menu-item
>
</a-sub-menu>
</div>
<div>
<a-menu-item key="login">
<div class="nav-tools-login" v-if="!account.user">
<router-link to="/login" class="nav-link">
<span>Log In</span>
</router-link>
</div>
<a-menu :selectedKeys="current" class="nav-menu-dropdown" mode="inline" @click="handleClick">
<a-sub-menu key="sub-artworks" title="Artworks">
<a-menu-item key="artwork-of-day">
<router-link to="/artworkofday" class="nav-sub"> Artwork of the Day </router-link>
</a-menu-item>
<a-menu-item key="signup">
<div class="nav-tools-signup" v-if="!account.user">
<router-link to="/signup" class="nav-link">
<span>Sign Up</span>
</router-link>
</div>
<a-menu-item key="artworks-list">
<router-link to="/artworks" class="nav-sub"> List of Artworks </router-link>
</a-menu-item>
</div>
</a-sub-menu>
<a-sub-menu key="sub-culture" title="Art & Culture">
<a-menu-item key="symbols">Symbols</a-menu-item>
<a-menu-item key="artist-of-day">
<router-link to="/artistofday" class="nav-sub"> Artist of the Day </router-link>
</a-menu-item>
<a-menu-item key="art-facts">Aboriginal Art Facts</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub-exhibitions" title="Exhibitions">
<a-menu-item key="exhibition-current">
<router-link to="/exhibition" class="nav-sub"> Current Exhibitions </router-link>
</a-menu-item>
<a-menu-item key="exhibition-past">Past Exhibitions</a-menu-item>
</a-sub-menu>
<router-link v-if="!account.user" to="/login" class="nav-link">
<a-menu-item key="login">Log In</a-menu-item>
</router-link>
<router-link v-if="!account.user" to="/signup" class="nav-link">
<a-menu-item key="signup">Sign Up</a-menu-item>
</router-link>
</a-menu>
</div>
</template>

<script>
import { Menu } from "ant-design-vue";
import { watch } from "vue";
import { ref, watch } from "vue";
import { mapState } from "vuex";

export default {
name: "CollapsibleMenuAntD",
components: {
AMenu: Menu,
ASubMenu: Menu.SubMenu,
AMenuItem: Menu.Item,
AntMenu: Menu,
AntSubMenu: Menu.SubMenu,
AntMenuItem: Menu.Item,
},
setup() {
const current = [];
const openKeys = [];
const current = ref([]);
const handleClick = (e) => {
console.log("click", e);
};
const titleClick = (e) => {
console.log("titleClick", e);
};
watch(
() => openKeys,
(val) => {
console.log("openKeys", val);
}
);

watch(current, (val) => {
console.log("current", val);
});

return {
current,
openKeys,
handleClick,
titleClick,
};
},
computed: {
Expand All @@ -124,10 +78,4 @@ export default {
display: grid;
grid-template-columns: max-content auto;
}
.nav-sub {
font-size: calc(12px + 2 * (100vw - 320px) / 1040);
}
.ant-menu::before {
content: none;
}
</style>
54 changes: 26 additions & 28 deletions art-gallery-frontend/src/components/CollapsibleMenuHTML.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,46 +3,37 @@
<ul class="nav-menu-dropdown">
<li>
<router-link to="/artworks" class="nav-link nav-link-1">
<span>Artworks</span>
<span class="nav-text">Artworks</span>
</router-link>
</li>
<li>
<router-link to="/culture" class="nav-link nav-link-2">
<span>Art & Culture</span>
</router-link>
</li>
<li>
<div class="nav-tools-login" v-if="!account.user">
<router-link to="/login" class="nav-link nav-link-3">
<span>Log In</span>
</router-link>
</div>
</li>
<li>
<router-link to="/artworkofday" class="nav-sub nav-link-1">
<span>Artwork of the Day</span>
<span class="nav-text">Artwork of the Day</span>
</router-link>
</li>
<li>
<router-link to="/culture" class="nav-link nav-link-2">
<span class="nav-text">Art & Culture</span>
</router-link>
<router-link to="/artistofday" class="nav-sub nav-link-2">
<span>Artist of the Day</span>
<span class="nav-text">Artist of the Day</span>
</router-link>
</li>
<li>
<div class="nav-tools-signup" v-if="!account.user">
<router-link to="/signup" class="nav-link nav-link-3">
<span>Sign Up</span>
</router-link>
</div>
<li v-if="!account.user" class="nav-link nav-link-3">
<router-link to="/login">
<span class="nav-text">Log In</span>
</router-link>
<router-link to="/signup">
<span class="nav-text">Sign Up</span>
</router-link>
</li>
<li>
<router-link to="/exhibition" class="nav-link nav-link-1">
<span>Exhibitions</span>
<span class="nav-text">Exhibitions</span>
</router-link>
</li>
</ul>
</div>
</template>

<script>
import { mapState } from "vuex";

Expand All @@ -57,25 +48,32 @@ export default {
</script>

<style scoped>
/* Add classes to style individual elements */
.nav-menu-dropdown {
display: grid;
grid-template-columns: auto auto 100px;
}

:deep(.nav-link-1) {
.nav-text {
font-weight: lighter;
font-size: smaller;
padding-left: 40px;
}

.nav-link-1 {
grid-column-start: 1;
}

:deep(.nav-link-2) {
.nav-link-2 {
grid-column-start: 2;
}

:deep(.nav-link-3) {
.nav-link-3 {
grid-column-start: 3;
margin-left: 0;
}

:deep(.nav-sub) {
.nav-sub {
font-weight: lighter;
font-size: smaller;
padding-left: 40px;
Expand Down
48 changes: 15 additions & 33 deletions art-gallery-frontend/src/components/DropdownMenuAntD.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,57 +6,39 @@
class="nav-menu"
disabledOverflow="{true}"
>
<a-sub-menu>
<a-sub-menu key="artworks">
<template #title>
<router-link to="/artworks" class="nav-link">
<span>Artworks</span>
Artworks
</router-link>
</template>
<a-menu-item key="artwork-of-day" class="menu-item">
<router-link to="/artworkofday" class="nav-sub">
<span>Artwork of the Day</span>
</router-link>
<router-link to="/artworkofday" class="nav-sub">Artwork of the Day</router-link>
</a-menu-item>
<a-menu-item key="artworks-list">
<router-link to="/artworks" class="nav-sub">
<span>Gallery of Artworks</span>
</router-link>
<router-link to="/artworks" class="nav-sub">Gallery of Artworks</router-link>
</a-menu-item>
</a-sub-menu>
<a-sub-menu>
<a-sub-menu key="art-and-culture">
<template #title>
<router-link to="/culture" class="nav-link">
<span>Art & Culture</span>
</router-link>
<router-link to="/culture" class="nav-link">Art & Culture</router-link>
</template>
<a-menu-item key="symbols">
<span class="nav-sub">Symbols</span>
</a-menu-item>
<a-menu-item key="symbols">Symbols</a-menu-item>
<a-menu-item key="artist-of-day">
<router-link to="/artistofday" class="nav-sub">
<span>Artist of the Day</span>
</router-link>
</a-menu-item>
<a-menu-item key="art-facts">
<span class="nav-sub">Art & Culture Facts</span>
<router-link to="/artistofday" class="nav-sub">Artist of the Day</router-link>
</a-menu-item>
<a-menu-item key="art-facts">Art & Culture Facts</a-menu-item>
</a-sub-menu>
<a-sub-menu>
<a-sub-menu key="exhibitions">
<template #title>
<router-link to="/exhibition" class="nav-link">
<span>Exhibitions</span>
</router-link>
<router-link to="/exhibition" class="nav-link">Exhibitions</router-link>
</template>
<a-menu-item key="exhibition-currnt">
<router-link to="/exhibition" class="nav-sub">
<span>Current Exhibitions</span>
</router-link>
</a-menu-item>
<a-menu-item key="exhibition-past">
<span class="nav-sub">Past Exhibitions</span>
<a-menu-item key="exhibition-current">
<router-link to="/exhibition" class="nav-sub">Current Exhibitions</router-link>
</a-menu-item>
<a-menu-item key="exhibition-past">Past Exhibitions</a-menu-item>
</a-sub-menu>
<a-sub-menu v-if="isAdmin()">
<a-sub-menu key="swagger" v-if="isAdmin()">
<template #title>
<a href="https://localhost:7194/swagger/index.html" class="nav-link">Swagger</a>
</template>
Expand Down
Loading