graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 06:43:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor clinet

Browse source
This commit is contained in:
syuilo 2021-10-23 23:22:20 +09:00
parent ae5d537197
commit 4d1c723496
15 changed files with 171 additions and 244 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/client/components/modal-page-window.vue
View file

@ -10,7 +10,7 @@
</span> </span>
<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button> <button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
</div> </div>
<div class="body _fitSide_"> <div class="body">
<keep-alive> <keep-alive>
<component :is="component" v-bind="props" :ref="changePage"/> <component :is="component" v-bind="props" :ref="changePage"/>
</keep-alive> </keep-alive>

2
src/client/components/page-window.vue
View file

@ -16,7 +16,7 @@
<template #headerLeft> <template #headerLeft>
<button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button> <button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button>
</template> </template>
<div class="yrolvcoq _fitSide_"> <div class="yrolvcoq">
<component :is="component" v-bind="props" :ref="changePage"/> <component :is="component" v-bind="props" :ref="changePage"/>
</div> </div>
</XWindow> </XWindow>

6
src/client/components/ui/folder.vue
View file

@ -153,10 +153,4 @@ export default defineComponent({
} }
} }
} }
._fitSide_ .ssazuxis {
> header {
padding: 0 16px;
}
}
</style> </style>

4
src/client/components/ui/info.vue
View file

@ -42,8 +42,4 @@ export default defineComponent({
margin-right: 4px; margin-right: 4px;
} }
} }
._fitSide_ .fpezltsf {
border-radius: 0;
}
</style> </style>

1
src/client/pages/admin/index.vue
View file

@ -343,7 +343,6 @@ export default defineComponent({
> .main { > .main {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
--baseContentWidth: 100%;
} }
} }

68
src/client/pages/messaging/index.vue
View file

@ -2,41 +2,43 @@
<div> <div>
<MkHeader :info="header"/> <MkHeader :info="header"/>
<div class="yweeujhr _root" v-size="{ max: [400] }"> <MkSpacer :content-max="800">
<MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton> <div class="yweeujhr" v-size="{ max: [400] }">
<MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
<div class="history" v-if="messages.length > 0"> <div class="history" v-if="messages.length > 0">
<MkA v-for="(message, i) in messages" <MkA v-for="(message, i) in messages"
class="message _block" class="message _block"
:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }" :class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`" :to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
:data-index="i" :data-index="i"
:key="message.id" :key="message.id"
v-anim="i" v-anim="i"
> >
<div> <div>
<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/> <MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
<header v-if="message.groupId"> <header v-if="message.groupId">
<span class="name">{{ message.group.name }}</span> <span class="name">{{ message.group.name }}</span>
<MkTime :time="message.createdAt" class="time"/> <MkTime :time="message.createdAt" class="time"/>
</header> </header>
<header v-else> <header v-else>
<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span> <span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span> <span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
<MkTime :time="message.createdAt" class="time"/> <MkTime :time="message.createdAt" class="time"/>
</header> </header>
<div class="body"> <div class="body">
<p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p> <p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p>
</div>
</div> </div>
</div> </MkA>
</MkA> </div>
<div class="_fullinfo" v-if="!fetching && messages.length == 0">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ $ts.noHistory }}</div>
</div>
<MkLoading v-if="fetching"/>
</div> </div>
<div class="_fullinfo" v-if="!fetching && messages.length == 0"> </MkSpacer>
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ $ts.noHistory }}</div>
</div>
<MkLoading v-if="fetching"/>
</div>
</div> </div>
</template> </template>
@ -177,7 +179,7 @@ export default defineComponent({
.yweeujhr { .yweeujhr {
> .start { > .start {
margin: var(--margin) auto var(--margin) auto; margin: 0 auto var(--margin) auto;
} }
> .history { > .history {

82
src/client/pages/note.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="fcuexfpr"> <MkSpacer :content-max="800">
<div class="_root"> <div class="fcuexfpr">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div v-if="note" class="note"> <div v-if="note" class="note">
<div class="_gap" v-if="showNext"> <div class="_gap" v-if="showNext">
@ -34,7 +34,7 @@
<MkLoading v-else/> <MkLoading v-else/>
</transition> </transition>
</div> </div>
</div> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -153,54 +153,52 @@ export default defineComponent({
.fcuexfpr { .fcuexfpr {
background: var(--bg); background: var(--bg);
> ._root { > .note {
> .note { > .main {
> .main { > .load {
> .load { min-width: 0;
min-width: 0; margin: 0 auto;
margin: 0 auto; border-radius: 999px;
border-radius: 999px;
&.next { &.next {
margin-bottom: var(--margin); margin-bottom: var(--margin);
}
&.prev {
margin-top: var(--margin);
}
} }
&.prev {
margin-top: var(--margin);
}
}
> .note {
> .note { > .note {
> .note { border-radius: var(--radius);
border-radius: var(--radius); background: var(--panel);
background: var(--panel); }
} }
> .clips {
> .title {
font-weight: bold;
padding: 12px;
} }
> .clips { > .item {
> .title { display: block;
font-weight: bold; padding: 16px;
padding: 12px;
> .description {
padding: 8px 0;
} }
> .item { > .user {
display: block; $height: 32px;
padding: 16px; padding-top: 16px;
border-top: solid 0.5px var(--divider);
line-height: $height;
> .description { > .avatar {
padding: 8px 0; width: $height;
} height: $height;
> .user {
$height: 32px;
padding-top: 16px;
border-top: solid 0.5px var(--divider);
line-height: $height;
> .avatar {
width: $height;
height: $height;
}
} }
} }
} }

1
src/client/pages/settings/index.vue
View file

@ -311,7 +311,6 @@ export default defineComponent({
flex: 1; flex: 1;
min-width: 0; min-width: 0;
overflow: auto; overflow: auto;
--baseContentWidth: 100%;
} }
} }
} }

7
src/client/pages/user/index.timeline.vue
View file

@ -65,11 +65,4 @@ export default defineComponent({
background: var(--bg); background: var(--bg);
} }
} }
._fitSide_ .yrzkoczt {
> .tab {
padding-left: var(--margin);
padding-right: var(--margin);
}
}
</style> </style>

190
src/client/pages/user/index.vue
View file

@ -81,20 +81,38 @@
</div> </div>
</div> </div>
</div> </div>
<div class="ftskorzw narrow _root" v-else-if="user && narrow === true" v-size="{ max: [500] }"> <MkSpacer v-else-if="user && narrow === true" :content-max="800">
<!-- TODO --> <div class="ftskorzw narrow" v-size="{ max: [500] }">
<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> --> <!-- TODO -->
<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> --> <!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
<div class="profile"> <div class="profile">
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/> <MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
<div class="_block main" :key="user.id"> <div class="_block main" :key="user.id">
<div class="banner-container" :style="style"> <div class="banner-container" :style="style">
<div class="banner" ref="banner" :style="style"></div> <div class="banner" ref="banner" :style="style"></div>
<div class="fade"></div> <div class="fade"></div>
<div class="title">
<MkUserName class="name" :user="user" :nowrap="true"/>
<div class="bottom">
<span class="username"><MkAcct :user="user" :detail="true" /></span>
<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
</div>
</div>
<span class="followed" v-if="$i && $i.id != user.id && user.isFollowed">{{ $ts.followsYou }}</span>
<div class="actions" v-if="$i">
<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
</div>
</div>
<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
<div class="title"> <div class="title">
<MkUserName class="name" :user="user" :nowrap="true"/> <MkUserName :user="user" :nowrap="false" class="name"/>
<div class="bottom"> <div class="bottom">
<span class="username"><MkAcct :user="user" :detail="true" /></span> <span class="username"><MkAcct :user="user" :detail="true" /></span>
<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span> <span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
@ -103,90 +121,74 @@
<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span> <span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
</div> </div>
</div> </div>
<span class="followed" v-if="$i && $i.id != user.id && user.isFollowed">{{ $ts.followsYou }}</span> <div class="description">
<div class="actions" v-if="$i"> <Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button> <p v-else class="empty">{{ $ts.noAccountDescription }}</p>
<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
</div> </div>
</div> <div class="fields system">
<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/> <dl class="field" v-if="user.location">
<div class="title"> <dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
<MkUserName :user="user" :nowrap="false" class="name"/> <dd class="value">{{ user.location }}</dd>
<div class="bottom"> </dl>
<span class="username"><MkAcct :user="user" :detail="true" /></span> <dl class="field" v-if="user.birthday">
<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span> <dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span> <dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span> </dl>
<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span> <dl class="field">
<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
</dl>
</div>
<div class="fields" v-if="user.fields.length > 0">
<dl class="field" v-for="(field, i) in user.fields" :key="i">
<dt class="name">
<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
</dt>
<dd class="value">
<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
</dd>
</dl>
</div>
<div class="status">
<MkA :to="userPage(user)" :class="{ active: page === 'index' }" v-click-anime>
<b>{{ number(user.notesCount) }}</b>
<span>{{ $ts.notes }}</span>
</MkA>
<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }" v-click-anime>
<b>{{ number(user.followingCount) }}</b>
<span>{{ $ts.following }}</span>
</MkA>
<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }" v-click-anime>
<b>{{ number(user.followersCount) }}</b>
<span>{{ $ts.followers }}</span>
</MkA>
</div> </div>
</div>
<div class="description">
<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
</div>
<div class="fields system">
<dl class="field" v-if="user.location">
<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
<dd class="value">{{ user.location }}</dd>
</dl>
<dl class="field" v-if="user.birthday">
<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
</dl>
<dl class="field">
<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
</dl>
</div>
<div class="fields" v-if="user.fields.length > 0">
<dl class="field" v-for="(field, i) in user.fields" :key="i">
<dt class="name">
<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
</dt>
<dd class="value">
<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
</dd>
</dl>
</div>
<div class="status">
<MkA :to="userPage(user)" :class="{ active: page === 'index' }" v-click-anime>
<b>{{ number(user.notesCount) }}</b>
<span>{{ $ts.notes }}</span>
</MkA>
<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }" v-click-anime>
<b>{{ number(user.followingCount) }}</b>
<span>{{ $ts.following }}</span>
</MkA>
<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }" v-click-anime>
<b>{{ number(user.followersCount) }}</b>
<span>{{ $ts.followers }}</span>
</MkA>
</div> </div>
</div> </div>
</div>
<div class="contents"> <div class="contents">
<template v-if="page === 'index'"> <template v-if="page === 'index'">
<div> <div>
<div v-if="user.pinnedNotes.length > 0" class="_gap"> <div v-if="user.pinnedNotes.length > 0" class="_gap">
<XNote v-for="note in user.pinnedNotes" class="note _block" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/> <XNote v-for="note in user.pinnedNotes" class="note _block" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
</div>
<MkInfo v-else-if="$i && $i.id === user.id">{{ $ts.userPagePinTip }}</MkInfo>
<XPhotos :user="user" :key="user.id"/>
<XActivity :user="user" :key="user.id"/>
</div> </div>
<MkInfo v-else-if="$i && $i.id === user.id">{{ $ts.userPagePinTip }}</MkInfo> <div>
<XPhotos :user="user" :key="user.id"/> <XUserTimeline :user="user"/>
<XActivity :user="user" :key="user.id"/> </div>
</div> </template>
<div> <XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _gap"/>
<XUserTimeline :user="user"/> <XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _gap"/>
</div> <XReactions v-else-if="page === 'reactions'" :user="user" class="_gap"/>
</template> <XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _gap"/> <XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _gap"/> <XGallery v-else-if="page === 'gallery'" :user="user" class="_gap"/>
<XReactions v-else-if="page === 'reactions'" :user="user" class="_gap"/> </div>
<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
<XGallery v-else-if="page === 'gallery'" :user="user" class="_gap"/>
</div> </div>
</div> </MkSpacer>
<MkError v-else-if="error" @retry="fetch()"/> <MkError v-else-if="error" @retry="fetch()"/>
<MkLoading v-else/> <MkLoading v-else/>
</transition> </transition>
@ -833,16 +835,4 @@ export default defineComponent({
} }
} }
} }
._fitSide_ .ftskorzw.narrow {
> .profile {
> .warn {
margin: 0;
}
> .main {
margin-top: 0;
}
}
}
</style> </style>

44
src/client/style.scss
View file

@ -1,7 +1,6 @@
@charset "utf-8"; @charset "utf-8";
:root { :root {
--baseContentWidth: 760px;
--radius: 12px; --radius: 12px;
--marginFull: 16px; --marginFull: 16px;
--marginHalf: 10px; --marginHalf: 10px;
@ -349,22 +348,6 @@ hr {
contain: layout; // ふき出しがボックスから飛び出て表示されるようなデザインをする場合もあるので paint は contain することができない contain: layout; // ふき出しがボックスから飛び出て表示されるようなデザインをする場合もあるので paint は contain することができない
} }
// TODO: 廃止
._root {
box-sizing: border-box;
margin: var(--root-margin, 32px) auto;
max-width: min(var(--baseContentWidth), calc(100% - (var(--root-margin, 32px) * 2)));
// 子marginが突き抜けるのを防ぐため
// https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element
padding-top: 1px;
margin-top: calc(var(--root-margin, 32px) - 1px);
@media (max-width: 500px) {
--root-margin: 10px;
}
}
._monolithic_ { ._monolithic_ {
._section:not(:empty) { ._section:not(:empty) {
box-sizing: border-box; box-sizing: border-box;
@ -380,33 +363,6 @@ hr {
} }
} }
._fitSide_ {
--root-margin: 0px;
--baseContentWidth: 100%;
--panelBorder: none;
._block {
//border-top: solid 0.5px var(--divider);
//border-bottom: solid 0.5px var(--divider);
border-radius: 0;
box-shadow: none;
}
._isolated {
margin: var(--margin);
}
._block._isolated {
border-radius: var(--radius);
}
@media (max-width: 500px) {
._root {
--root-margin: 0px;
}
}
}
._narrow_ ._card { ._narrow_ ._card {
> ._title { > ._title {
padding: 16px; padding: 16px;

2
src/client/ui/chat/side.vue
View file

@ -3,7 +3,7 @@
<header class="header" @contextmenu.prevent.stop="onContextmenu"> <header class="header" @contextmenu.prevent.stop="onContextmenu">
<MkHeader class="title" :info="pageInfo" :center="false"/> <MkHeader class="title" :info="pageInfo" :center="false"/>
</header> </header>
<component :is="component" v-bind="props" :ref="changePage" class="body _fitSide_"/> <component :is="component" v-bind="props" :ref="changePage" class="body"/>
</div> </div>
</template> </template>

2
src/client/ui/deck/main-column.vue
View file

@ -7,7 +7,7 @@
</template> </template>
</template> </template>
<router-view v-slot="{ Component }" class="_fitSide_"> <router-view v-slot="{ Component }">
<transition> <transition>
<keep-alive :include="['timeline']"> <keep-alive :include="['timeline']">
<component :is="Component" :ref="changePage" @contextmenu.stop="onContextmenu"/> <component :is="Component" :ref="changePage" @contextmenu.stop="onContextmenu"/>

2
src/client/ui/default.vue
View file

@ -13,7 +13,7 @@
</template> </template>
<main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }"> <main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
<div class="content" :class="{ _fitSide_: !fullView }"> <div class="content">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition"> <transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
<keep-alive :include="['timeline']"> <keep-alive :include="['timeline']">

2
src/client/widgets/notifications.vue
View file

@ -3,7 +3,7 @@
<template #header><i class="fas fa-bell"></i>{{ $ts.notifications }}</template> <template #header><i class="fas fa-bell"></i>{{ $ts.notifications }}</template>
<template #func><button @click="configure()" class="_button"><i class="fas fa-cog"></i></button></template> <template #func><button @click="configure()" class="_button"><i class="fas fa-cog"></i></button></template>
<div class="_fitSide_"> <div>
<XNotifications :include-types="props.includingTypes"/> <XNotifications :include-types="props.includingTypes"/>
</div> </div>
</MkContainer> </MkContainer>