mirror of
https://github.com/HangarMC/Hangar.git
synced 2025-03-13 15:39:18 +08:00
all hail the flex gods!
* Fixed ProjectList flex setup * Adjusted flex formatting on VersionListView
This commit is contained in:
Jake Potrebic
parent
ad8b8976ec
commit
53930d3f78
@ -14,18 +14,19 @@
|
||||
:key="project.namespace.owner + project.namespace.slug"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-1">
|
||||
<div class="row flex-lg-nowrap flex-md-wrap">
|
||||
<div class="flex-shrink-0 pl-3">
|
||||
<Icon :name="project.namespace.owner" :src="project.icon_url" extra-classes="user-avatar-sm"></Icon>
|
||||
</div>
|
||||
<div class="col-12 col-sm-11">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<a :href="ROUTES.parse('PROJECTS_SHOW', project.namespace.owner, project.namespace.slug)" class="title">
|
||||
{{ project.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-6 hidden-xs">
|
||||
<div class="flex-lg-shrink-0 ml-2">
|
||||
<a :href="ROUTES.parse('PROJECTS_SHOW', project.namespace.owner, project.namespace.slug)" class="title">
|
||||
{{ project.name }}
|
||||
</a>
|
||||
<div class="description">{{ project.description }}</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 mr-2">
|
||||
<div class="row flex-wrap">
|
||||
<div class="col-12 d-lg-block d-none">
|
||||
<div class="info minor">
|
||||
<span class="stat recommended-version" title="Recommended version" v-if="project.recommended_version">
|
||||
<i class="far fa-gem"></i>
|
||||
@ -54,19 +55,14 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-7 description-column">
|
||||
<div class="description">{{ project.description }}</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-5 tags-line" v-if="project.promoted_versions">
|
||||
<div class="col-12 tags-line">
|
||||
<Tag
|
||||
v-bind:name="tag.name"
|
||||
v-bind:data="tag.versions.join(' | ')"
|
||||
v-bind:color="tag.color"
|
||||
v-bind:key="project.name + '-' + tag.name"
|
||||
v-for="tag in tagsFromPromoted(project.promoted_versions)"
|
||||
></Tag>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -259,12 +255,15 @@ export default {
|
||||
justify-content: flex-end;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
justify-content: flex-start;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.tags {
|
||||
margin-right: 0.5rem;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
:last-child {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<div class="col-lg-9">
|
||||
<div class="version-list">
|
||||
<div v-if="loading">
|
||||
<i class="fas fa-spinner fa-spin"></i>
|
||||
@ -75,67 +75,72 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="col-lg-3">
|
||||
<div class="row" v-if="canUpload">
|
||||
<div class="col-12">
|
||||
<a class="btn btn-primary mb-2 w-100" :href="ROUTES.parse('VERSIONS_SHOW_CREATOR', ownerName, projectSlug)"> Upload a New Version </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12 col-md-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title float-left">Channels</h3>
|
||||
<input v-model="channelFilter.allChecked" type="checkbox" class="float-right" @change="checkAll" aria-label="Check All" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title float-left">Channels</h3>
|
||||
<input v-model="channelFilter.allChecked" type="checkbox" class="float-right" @change="checkAll" aria-label="Check All" />
|
||||
<ul class="list-group">
|
||||
<li v-for="channel in channels" :key="channel.id" class="list-group-item">
|
||||
<span class="channel" :style="{ backgroundColor: channel.color.hex }" v-text="channel.name"></span>
|
||||
<input
|
||||
v-model="channelFilter.filter"
|
||||
:value="channel.name"
|
||||
type="checkbox"
|
||||
class="float-right"
|
||||
@change="updateCheckAll"
|
||||
:aria-label="channel.name"
|
||||
/>
|
||||
</li>
|
||||
<li v-if="canEditChannels" class="list-group-item text-right">
|
||||
<a :href="ROUTES.parse('CHANNELS_SHOW_LIST', ownerName, projectSlug)" class="btn btn-sm bg-warning"> Edit </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 col-md-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title float-left">Platforms</h3>
|
||||
<input v-model="platformFilter.allChecked" type="checkbox" class="float-right" @change="checkAllPlatforms" aria-label="Check All" />
|
||||
</div>
|
||||
|
||||
<ul class="list-group">
|
||||
<li v-for="channel in channels" :key="channel.id" class="list-group-item">
|
||||
<span class="channel" :style="{ backgroundColor: channel.color.hex }" v-text="channel.name"></span>
|
||||
<input
|
||||
v-model="channelFilter.filter"
|
||||
:value="channel.name"
|
||||
type="checkbox"
|
||||
class="float-right"
|
||||
@change="updateCheckAll"
|
||||
:aria-label="channel.name"
|
||||
/>
|
||||
</li>
|
||||
<li v-if="canEditChannels" class="list-group-item text-right">
|
||||
<a :href="ROUTES.parse('CHANNELS_SHOW_LIST', ownerName, projectSlug)" class="btn btn-sm bg-warning"> Edit </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title float-left">Platforms</h3>
|
||||
<input v-model="platformFilter.allChecked" type="checkbox" class="float-right" @change="checkAllPlatforms" aria-label="Check All" />
|
||||
<ul class="list-group">
|
||||
<li v-for="platform in platforms" :key="platform.name" class="list-group-item">
|
||||
<span
|
||||
class="channel"
|
||||
:style="{ backgroundColor: platform.tagColor.background, color: platform.tagColor.foreground }"
|
||||
v-text="platform.name"
|
||||
/>
|
||||
<input
|
||||
v-model="platformFilter.filter"
|
||||
type="checkbox"
|
||||
:value="platform.name"
|
||||
class="float-right"
|
||||
@change="updateCheckAllPlatforms"
|
||||
:aria-label="platform.name"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 col-md-4 col-sm-6">
|
||||
<MemberList
|
||||
:can-manage-members="canManageMembers"
|
||||
:filtered-members-prop="filteredMembers"
|
||||
:settings-call="ROUTES.parse('PROJECTS_SHOW_SETTINGS', ownerName, projectSlug)"
|
||||
></MemberList>
|
||||
</div>
|
||||
|
||||
<ul class="list-group">
|
||||
<li v-for="platform in platforms" :key="platform.name" class="list-group-item">
|
||||
<span
|
||||
class="channel"
|
||||
:style="{ backgroundColor: platform.tagColor.background, color: platform.tagColor.foreground }"
|
||||
v-text="platform.name"
|
||||
></span>
|
||||
<input
|
||||
v-model="platformFilter.filter"
|
||||
type="checkbox"
|
||||
:value="platform.name"
|
||||
class="float-right"
|
||||
@change="updateCheckAllPlatforms"
|
||||
:aria-label="platform.name"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<MemberList
|
||||
:can-manage-members="canManageMembers"
|
||||
:filtered-members-prop="filteredMembers"
|
||||
:settings-call="ROUTES.parse('PROJECTS_SHOW_SETTINGS', ownerName, projectSlug)"
|
||||
></MemberList>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user