Skip to content

Commit

Permalink
Bootstrap redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@coolbigbear
coolbigbear committed Dec 18, 2019
1 parent c3321a1 commit 03d415a
Show file tree
Hide file tree
Showing 6 changed files with 233 additions and 132 deletions.
2 changes: 1 addition & 1 deletion imgbook/config/app.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
|
*/

'name' => env('APP_NAME', 'ImgBook'),
'name' => env('APP_NAME', 'Imgbook'),

/*
|--------------------------------------------------------------------------
Expand Down
157 changes: 100 additions & 57 deletions imgbook/public/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1855,6 +1855,16 @@ __webpack_require__.r(__webpack_exports__);
//
//
//
//
//
//
//
//
//
//
//
//
//
/* harmony default export */ __webpack_exports__["default"] = ({
props: ['postId', 'userId'],
data: function data() {
Expand All @@ -1877,6 +1887,7 @@ __webpack_require__.r(__webpack_exports__);
//success
_this.comments = response.data;
_this.newComment = '';
console.log(response.data);
})["catch"](function (response) {
//failure
console.log(response);
Expand Down Expand Up @@ -37328,63 +37339,95 @@ var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c("div", { attrs: { id: "root" } }, [
_vm._v("\n " + _vm._s(_vm.commentMessage) + "\n \n "),
_c("input", {
directives: [
{
name: "model",
rawName: "v-model",
value: _vm.newComment,
expression: "newComment"
}
],
attrs: { type: "text", id: "input" },
domProps: { value: _vm.newComment },
on: {
input: function($event) {
if ($event.target.composing) {
return
}
_vm.newComment = $event.target.value
}
}
}),
_vm._v(" "),
_c("button", { on: { click: _vm.createComment } }, [
_vm._v(_vm._s(_vm.changeOrPost))
]),
_vm._v("\n\n Comments:\n "),
_c(
"ul",
return _c(
"div",
{ attrs: { id: "root" } },
[
_c("div", { staticClass: "form-group" }, [
_c("label", [_c("b", [_vm._v(_vm._s(_vm.commentMessage))])]),
_vm._v(" "),
_c("div", { staticClass: "input-group" }, [
_c("input", {
directives: [
{
name: "model",
rawName: "v-model",
value: _vm.newComment,
expression: "newComment"
}
],
staticClass: "form-control",
attrs: {
type: "textarea",
name: "text",
placeholder: "Enter a comment"
},
domProps: { value: _vm.newComment },
on: {
input: function($event) {
if ($event.target.composing) {
return
}
_vm.newComment = $event.target.value
}
}
}),
_vm._v(" "),
_c(
"button",
{
staticClass: "btn btn-primary",
on: { click: _vm.createComment }
},
[_vm._v(_vm._s(_vm.changeOrPost))]
)
])
]),
_vm._v(" "),
_c("hr"),
_vm._v(" "),
_vm._l(_vm.comments, function(comment) {
return _c("li", { key: comment.id }, [
_vm._v(
"\n " +
_vm._s(comment.user.username) +
" -- " +
_vm._s(comment.text) +
"\n "
),
comment.user.id == _vm.userId
? _c(
"button",
{
attrs: { id: "editButton" },
on: {
click: function($event) {
return _vm.editCommentButton(comment)
}
}
},
[_vm._v("Edit")]
)
: _vm._e()
return _c("div", { key: comment.id }, [
_c("h4", { staticClass: "media-heading user_name" }, [
_vm._v(_vm._s(comment.user.username))
]),
_vm._v(" "),
_c("p", [_c("small", [_vm._v(_vm._s(comment.updated_at))])]),
_vm._v(" "),
_c("div", { staticClass: "container" }, [
_c("div", { staticClass: "row" }, [
_c("div", { staticClass: "col" }, [
_vm._v(
"\n " +
_vm._s(comment.text) +
"\n "
)
]),
_vm._v(" "),
_c("div", { staticClass: "col-md-auto" }, [
comment.user.id == _vm.userId
? _c(
"button",
{
staticClass: "btn btn-primary pull-right",
attrs: { id: "editButton" },
on: {
click: function($event) {
return _vm.editCommentButton(comment)
}
}
},
[_vm._v("Edit")]
)
: _vm._e()
])
])
])
])
}),
0
)
])
})
],
2
)
}
var staticRenderFns = []
render._withStripped = true
Expand Down Expand Up @@ -49720,8 +49763,8 @@ __webpack_require__.r(__webpack_exports__);
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(/*! /home/vagrant/laravel/testsite/resources/js/app.js */"./resources/js/app.js");
module.exports = __webpack_require__(/*! /home/vagrant/laravel/testsite/resources/sass/app.scss */"./resources/sass/app.scss");
__webpack_require__(/*! /home/vagrant/laravel/laravel-web-app/imgbook/resources/js/app.js */"./resources/js/app.js");
module.exports = __webpack_require__(/*! /home/vagrant/laravel/laravel-web-app/imgbook/resources/sass/app.scss */"./resources/sass/app.scss");


/***/ })
Expand Down
36 changes: 24 additions & 12 deletions imgbook/resources/js/components/CommentComponent.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,28 @@
<template>
<div id="root">
{{ commentMessage}}

<input type="text" id="input" v-model="newComment">
<button @click="createComment">{{changeOrPost}}</button>

Comments:
<ul>
<li v-for="comment in comments" :key="comment.id">
{{ comment.user.username }} -- {{ comment.text}}
<button id="editButton" v-if="comment.user.id == userId" @click="editCommentButton(comment)">Edit</button>
</li>
</ul>
<div class="form-group">
<label><b>{{ commentMessage }}</b></label>
<div class="input-group">
<input type="textarea" name="text" class="form-control" placeholder="Enter a comment" v-model="newComment">
<br>
<button class="btn btn-primary" @click="createComment">{{changeOrPost}}</button>
</div>
</div>
<hr/>
<div v-for="comment in comments" :key="comment.id">
<h4 class="media-heading user_name">{{ comment.user.username }}</h4>
<p><small>{{ comment.updated_at }}</small></p>
<div class="container">
<div class="row">
<div class="col">
{{ comment.text}}
</div>
<div class="col-md-auto">
<button class="btn btn-primary pull-right" id="editButton" v-if="comment.user.id == userId" @click="editCommentButton(comment)">Edit</button>
</div>
</div>
</div>
</div>
</div>
</template>

Expand All @@ -37,6 +48,7 @@
//success
this.comments = response.data;
this.newComment = '';
console.log(response.data);
})
.catch(response => {
//failure
Expand Down
39 changes: 25 additions & 14 deletions imgbook/resources/views/layouts/app.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'ImgBook') }}
</a>
Expand Down Expand Up @@ -73,20 +73,31 @@
</nav>

<main class="py-4">
@yield('title')
@if (session('message'))
<p><b>{{ session('message')}}</b></p>
@endif
@if ($errors->any())
<div>
Errors:
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error}}</li>
@endforeach
</ul>
<div class="row justify-content-center">
<div class="col-md-8">
<h1>@yield('title')</h1>
@yield('back')
@if (session('message'))
<div>&nbsp;</div> {{-- add single space --}}
<div class="alert alert-success alert-dismissible">
<b>{{ session('message')}}</b>
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
</div>
@endif
@if ($errors->any())
<div>&nbsp;</div> {{-- add single space --}}
<div class="alert alert-danger">
<strong>Errors:</strong>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error}}</li>
@endforeach
</ul>
</div>
@endif
</div>
</div>
@endif
<div>&nbsp;</div> {{-- add single space --}}
@yield('content')
</main>
</div>
Expand Down
68 changes: 44 additions & 24 deletions imgbook/resources/views/posts/create.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,48 @@
@endif

@section('content')
@if ($update)
<form method="POST" action="{{ route('posts.update', ['id' => $post->id]) }}">
@csrf
<p>Title: <input type="text" name="title"
value="{{$post->title}}"></p>
<p>Description: <input type="text" name="description"
value="{{$post->description}}"></p>
<input type="submit" value="Update">
<a href="{{ route('posts.show', ['id' => $post->id]) }}">Cancel</a>
<br>
<img src="{{ asset($post->image->image) ?? 'No Image'}}"></li>
</form>
@else
<form method="POST" action="{{ route('posts.store') }}" enctype="multipart/form-data">
@csrf
<p>Title: <input type="text" name="title"
value="{{ old('title') }}"></p>
<input type="file" name="image">
<p>Description: <input type="text" name="description"
value="{{ old('description') }}"></p>
<input type="submit" value="Submit">
<a href="{{ route('posts.index') }}">Cancel</a>
</form>
@endif
<div class="row justify-content-center">
<div class="col-md-8">
@if ($update)
<div class="alert alert-warning">
<strong>Warning!</strong>
<br>
To change the picture please delete the post and repost it.
</div>
<form method="POST" action="{{ route('posts.update', ['id' => $post->id]) }}">
@csrf
<div class="form-group">
<label>Title</label>
<input type="text" name="title" class="form-control" placeholder="Enter title" value="{{$post->title}}">
</div>
<div class="form-group">
<label>Description</label>
<input type="textarea" name="description" class="form-control" placeholder="Enter description" value="{{$post->description}}">
</div>
<button type="submit" class="btn btn-primary">Update</button>
<a class="btn btn-danger" href="{{ route('posts.show', ['id' => $post->id]) }}">Cancel</a>
<div>&nbsp;</div> {{-- add single space --}}
<img class="img-fluid" src="{{ asset($post->image->image) ?? 'No Image'}}"></li>
</form>
@else
<form method="POST" action="{{ route('posts.store') }}" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label>Title</label>
<input type="text" name="title" class="form-control" placeholder="Enter title" value="{{ old('title') }}">
</div>
<div class="form-group">
<label for="exampleFormControlFile1">Attach image to your post</label>
<input type="file" name="image" class="form-control-file" value="{{ old('image') }}">
</div>
<div class="form-group">
<label>Description</label>
<input type="textarea" name="description" class="form-control" placeholder="Enter description" value="{{ old('description') }}">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<a class="btn btn-danger" href="{{ route('posts.index') }}">Cancel</a>
</form>
@endif
</div>
</div>
@endsection
Loading

0 comments on commit 03d415a

Please sign in to comment.