chris
/
pixelfed
forked from mirror/pixelfed
1
0
Fork 0
Code Pull Requests Activity

Merge pull request #1034 from pixelfed/frontend-ui-refactor 

Frontend ui refactor
This commit is contained in:
daniel 2019-03-16 02:51:56 -06:00 committed by GitHub
parent 1206c5a5a5 8e2695ce97
commit 66a594da65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 379 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/ImportData.php
View File

@ -6,5 +6,5 @@ use Illuminate\Database\Eloquent\Model;
class ImportData extends Model
{
//
protected $table = 'import_datas';
}

2
config/pixelfed.php
View File

@ -23,7 +23,7 @@ return [
| This value is the version of your PixelFed instance.
|
*/
'version' => '0.8.0',
'version' => '0.8.1',
/*
|--------------------------------------------------------------------------

BIN
public/img/landing/android_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

BIN
public/img/landing/ios_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 218 KiB

BIN
public/img/landing/ios_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 313 KiB

BIN
public/img/landing/ios_3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 366 KiB

BIN
public/img/landing/ios_4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

1
public/js/landing.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
public/js/status.js vendored
View File

File diff suppressed because one or more lines are too long

3
public/mix-manifest.json
View File

@ -5,8 +5,9 @@
"/css/appdark.css": "/css/appdark.css?id=08d0a92912b101bb7457",
"/js/components.js": "/js/components.js?id=39d45813739697ddad5c",
"/js/discover.js": "/js/discover.js?id=75fb12b06ee23fa05186",
"/js/landing.js": "/js/landing.js?id=7db0170a1a3d59d798f5",
"/js/micro.js": "/js/micro.js?id=178479fb6990f8806257",
"/js/profile.js": "/js/profile.js?id=69fd7039c50660f4e34d",
"/js/status.js": "/js/status.js?id=0013d7a91c8d0080f3ca",
"/js/status.js": "/js/status.js?id=ebabf16dae1d57b10bac",
"/js/timeline.js": "/js/timeline.js?id=883ad41b10ffe9765d65"
}

316
resources/assets/js/components/LandingPage.vue Normal file
View File

File diff suppressed because one or more lines are too long

10
resources/assets/js/landing.js vendored Normal file
View File

@ -0,0 +1,10 @@
window.Vue = require('vue');
Vue.component(
'landing-page',
require('./components/LandingPage.vue').default
);
new Vue({
el: '#content'
});

209
resources/views/site/index.blade.php
View File

@ -1,172 +1,49 @@
@extends('layouts.app')
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
@section('content')
<meta name="mobile-web-app-capable" content="yes">
<title>{{ config('app.name', 'Laravel') }}</title>
<div class="jumbotron jumbotron-fluid bg-alt text-white my-0">
<div class="container text-center mt-5">
<h1 class="display-4 font-weight-ultralight">Image Sharing for Everyone</h1>
<p class="h3 font-weight-ultralight">A free and ethical photo sharing platform.</p>
</div>
</div>
<div class="py-3"></div>
<div class="container slim d-none d-md-block">
<div class="row">
<div class="col-12 col-md-4 mb-4">
<div class="card bg-transparent" style="box-shadow: none;border:1px solid #fff">
<div class="card-body text-white text-center">
<p class="font-weight-bold lead mb-0">
Ad Free
</p>
<p class="font-weight-light mb-0">No Ads or Trackers</p>
</div>
</div>
</div>
<div class="col-12 col-md-4 mb-4">
<div class="card bg-transparent" style="box-shadow: none;border:1px solid #fff">
<div class="card-body text-white text-center">
<p class="font-weight-bold lead mb-0">
Chronological
</p>
<p class="font-weight-light mb-0">Timelines in order</p>
</div>
</div>
</div>
<div class="col-12 col-md-4 mb-4">
<div class="card bg-transparent" style="box-shadow: none;border:1px solid #fff">
<div class="card-body text-white text-center">
<p class="font-weight-bold lead mb-0">
Federated
</p>
<p class="font-weight-light mb-0">A network of millions</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card bg-transparent" style="box-shadow: none;border:1px solid #fff">
<div class="card-body text-white text-center">
<p class="font-weight-bold lead mb-0">
Discover
</p>
<p class="font-weight-light mb-0">Discover popular posts</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card bg-transparent" style="box-shadow: none;border:1px solid #fff">
<div class="card-body text-white text-center">
<p class="font-weight-bold lead mb-0">
Photo Filters
</p>
<p class="font-weight-light mb-0">Add an optional filter</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card bg-transparent" style="box-shadow: none;border:1px solid #fff">
<div class="card-body text-white text-center">
<p class="font-weight-bold lead mb-0">
Stories
</p>
<p class="font-weight-light mb-0">Coming Soon!</p>
</div>
</div>
</div>
</div>
</div>
<div class="py-5 d-none d-md-block"></div>
<div class="container slim d-flex justify-content-center">
<div class="card" style="width:500px;">
<div class="card-header d-inline-flex align-items-center bg-white">
<img src="/storage/avatars/default.png" width="32px" height="32px" style="border-radius: 32px; border: 1px solid #ccc">
<span class="username font-weight-bold pl-2 text-dark">
username
</span>
</div>
<div class="card-body p-0">
<img class="img-fluid" src="/img/sample-post.jpeg">
</div>
<div class="card-footer bg-white">
<div class="likes font-weight-bold mb-2">
<span class="like-count">124k</span> likes
</div>
<div class="caption">
<p class="mb-1">
<span class="username font-weight-bold">
<bdi>username</bdi>
</span>
<span class="caption-body" data-processed="false">Hello world! <a href="#">#introduction</a></span>
</p>
</div>
</div>
</div>
</div>
<div class="py-5 my-5"></div>
<div class="container">
<div class="row d-flex align-items-center">
<div class="col-12 col-md-5">
<img src="/img/online_world.svg" class="img-fluid">
</div>
<div class="col-12 col-md-7 text-center">
<h1 class="h1">Create. Discover. Share.</h1>
<p class="h3 font-weight-light">
A feature rich photo sharing experience <br>
</p>
</div>
</div>
</div>
<div class="py-5 my-5"></div>
<div class="bg-white">
<section class="container slim mt-5">
<div class="row py-5">
<div class="col-12 my-5 py-5">
<div class="text-center">
<h1 class="display-4">Powered by People</h1>
<p class="h3 font-weight-light">
Pixelfed is an open-source, federated platform. <br>
You can run your own instance or join one. <br>
</p>
{{-- <p class="pt-5 mb-0">
<a class="btn btn-outline-secondary btn-lg font-weight-ultralight mr-3" href="{{route('site.about')}}">About this Instance</a>
<a class="btn btn-outline-secondary btn-lg font-weight-ultralight" href="{{route('login')}}">Login</a>
</p> --}}
</div>
<meta property="og:site_name" content="{{ config('app.name', 'pixelfed') }}">
<meta property="og:title" content="{{ config('app.name', 'pixelfed') }}">
<meta property="og:type" content="article">
<meta property="og:url" content="{{request()->url()}}">
<meta property="og:description" content="Federated Image Sharing">
<meta name="medium" content="image">
<meta name="theme-color" content="#10c5f8">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
<link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
</head>
<body class="">
<main id="content">
<landing-page></landing-page>
</main>
<footer>
<div class="container py-3">
<p class="mb-0 text-uppercase font-weight-bold small text-justify">
<a href="{{route('site.about')}}" class="text-primary pr-3">{{__('site.about')}}</a>
<a href="{{route('site.help')}}" class="text-primary pr-3">{{__('site.help')}}</a>
<a href="{{route('site.opensource')}}" class="text-primary pr-3">{{__('site.opensource')}}</a>
<a href="{{route('site.terms')}}" class="text-primary pr-3">{{__('site.terms')}}</a>
<a href="{{route('site.privacy')}}" class="text-primary pr-3">{{__('site.privacy')}}</a>
<a href="{{route('site.platform')}}" class="text-primary pr-3">API</a>
<a href="{{route('site.language')}}" class="text-primary pr-3">{{__('site.language')}}</a>
<a href="https://pixelfed.org" class="text-muted float-right" rel="noopener" title="version {{config('pixelfed.version')}}" data-toggle="tooltip">Powered by PixelFed</a>
</p>
</div>
</footer>
</body>
</div>
</div>
</section>
</div>
@endsection
<script type="text/javascript" src="{{mix('js/app.js')}}"></script>
<script type="text/javascript" src="{{mix('js/landing.js')}}"></script>
</html>
@push('meta')
<meta property="og:description" content="Federated Image Sharing">
<style type="text/css">
.container.slim {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.bg-alt {
background: #FEAC5E;
background: -webkit-linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E);
background: linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E);
}
.jumbotron.bg-alt:before {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
min-height: 900px;
top: 0;
-webkit-transform: skewY(-12deg);
transform: skewY(-12deg);
background: #FEAC5E;
background: -webkit-linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E);
background: linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E);
}
</style>
@endpush

4
webpack.mix.js vendored
View File

@ -14,6 +14,7 @@ let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/activity.js', 'public/js')
.js('resources/assets/js/components.js', 'public/js')
//.js('resources/assets/js/embed.js', 'public')
// Discover component
.js('resources/assets/js/discover.js', 'public/js')
@ -30,6 +31,9 @@ mix.js('resources/assets/js/app.js', 'public/js')
// MicroUI component
.js('resources/assets/js/micro.js', 'public/js')
// LandingPage component
.js('resources/assets/js/landing.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css', {
implementation: require('node-sass')
})