Split up the entry page into components.

このコミットが含まれているのは:
David Blaszyk 2018-01-25 06:08:50 +09:00
コミット 596548c73d
7個のファイルの変更108行の追加76行の削除

ファイルの表示

@ -61,7 +61,14 @@ class FileController extends Controller {
public function getFileTitle($id) { // /api/rpc/file/getfiletitle/id
return DB::table('str_file')
->select('title', 'version')
->select(
'title',
'version',
'views',
'downloads',
'submit_date',
'last_date'
)
->where('id', $id)
->get();
}

ファイルの表示

@ -22,6 +22,7 @@ Vue.component('new-items', require('./components/NewEntries.vue'));
Vue.component('hot-items', require('./components/HotEntries.vue'));
// Entry page.
Vue.component('entry-title', require('./components/Entry/EntryTitle.vue'));
Vue.component('entry-description', require('./components/Entry/EntryDescription.vue'));
Vue.component('entry-changelog', require('./components/Entry/EntryChangelog.vue'));
Vue.component('entry-screenshots', require('./components/Entry/EntryScreenshots.vue'));

ファイルの表示

@ -1,6 +1,10 @@
<template>
<div class="panel panel-default">
<div class="panel-heading">@lang('entry.changelog', ['version' => '2.0'])</div>
<div class="panel-heading">
<!--@lang('entry.changelog', ['version' => '2.0'])-->
Changes in {{ version }}
</div>
<div class="panel-body">
<div class="container">
<div class="row">
@ -19,13 +23,15 @@
data: function () {
return {
id: 1,
changelog: ''
changelog: '',
version: ''
}
},
created: function () {
axios.get('/api/rpc/file/getfilechangelog/' + this.id).then(data => {
this.changelog = data.data[0].changelog;
})
this.version = data.data[0].version;
});
}
}
</script>

ファイルの表示

@ -1,6 +1,7 @@
<template>
<div class="panel panel-default">
<div class="panel-heading">@lang('entry.description')</div>
<div class="panel-body">
<div class="container">
<div class="row">

ファイルの表示

@ -1,8 +1,14 @@
<template>
<div class="container">
<div class="row">
<div class="col-md-12">
(IMG)
<div class="panel panel-default">
<div class="panel-heading">@lang('entry.screenshots')</div>
<div class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-12">
(IMG)
</div>
</div>
</div>
</div>
</div>

ファイルの表示

@ -1,25 +1,93 @@
<template>
<div class="container">
<div class="row">
<div class="col-md-12">
{{ description }}
</div>
<div class="panel panel-default">
<div class="panel-heading">
<!--@lang('entry.title', ['name' => 'Some Mod 2.0', 'user' => 'Someuser'])-->
{{ title }} {{ version }} by Some Hardcoded Person
</div>
<div class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-lg">
<!--@lang('entry.download')-->
Download
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary">
<!--@lang('entry.update')-->
Update
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-danger">
<!--@lang('entry.remove')-->
Remove
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary">
<!--@lang('entry.approve')-->
Disapprove
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-warning">
<!--@lang('entry.report')-->
Report
</button>
</div>
</div>
<div class="row">
<div class="col-md-2">
<!--@lang('entry.views', ['count' => '1000'])-->
Views: {{ views }}
</div>
<div class="col-md-2">
<!--@lang('entry.downloads', ['count' => '1000'])-->
Downloads: {{ downloads }}
</div>
<div class="col-md-2">
<!--@lang('entry.submitted', ['datetime' => '1945/05/05'])-->
Submitted: {{ submit_date }}
</div>
<div v-if="last_date !== 0"class="col-md-2">
<!--@lang('entry.updated', ['datetime' => '2050/12/01'])-->
Updated: {{ last_date }}
</div>
<div class="col-md-2">
<!--@lang('entry.filesize', ['size' => '1 TB'])-->
Filesize: 1 TB
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'entry-description',
name: 'entry-title',
data: function () {
return {
id: 1,
description: ''
title: '',
version: '',
views: 0,
downloads: 0,
submit_date: 0,
last_date: 0,
}
},
created: function () {
axios.get('/api/rpc/file/getfiledescription/' + this.id).then(data => {
this.description = data.data[0].description;
axios.get('/api/rpc/file/getfiletitle/' + this.id).then(data => {
this.title = data.data[0].title;
this.version = data.data[0].version;
this.views = data.data[0].views;
this.downloads = data.data[0].downloads;
this.submit_date = data.data[0].submit_date;
this.last_date = data.data[0].last_date;
})
}
}

ファイルの表示

@ -3,65 +3,8 @@
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">@lang('entry.title', ['name' => 'Some Mod 2.0', 'user' => 'Someuser'])</div>
<div class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-lg">
@lang('entry.download')
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary">
@lang('entry.update')
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-danger">
@lang('entry.remove')
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary">
@lang('entry.approve')
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-warning">
@lang('entry.report')
</button>
</div>
</div>
<div class="row">
<div class="col-md-2">
@lang('entry.views', ['count' => '1000'])
</div>
<div class="col-md-2">
@lang('entry.downloads', ['count' => '1000'])
</div>
<div class="col-md-2">
@lang('entry.submitted', ['datetime' => '1945/05/05'])
</div>
<div class="col-md-2">
@lang('entry.updated', ['datetime' => '2050/12/01'])
</div>
<div class="col-md-2">
@lang('entry.filesize', ['size' => '1 TB'])
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">@lang('entry.screenshots')</div>
<div class="panel-body">
<entry-screenshots />
</div>
</div>
<entry-title />
<entry-screenshots />
<entry-description />
<entry-changelog />
</div>