Commit 28aba9d1 authored by onny's avatar onny

update css style, fix project serializer

parent 0e6cd827
......@@ -7,6 +7,8 @@ class ArtistSerializer(serializers.ModelSerializer):
fields = ('id', 'name')
class ProjectSerializer(serializers.ModelSerializer):
artist = ArtistSerializer(many=False, read_only=True)
class Meta:
model = Project
fields = ('id', 'artist', 'name')
body {
margin: 0 !important; /*
margin: 0 !important;
padding: 0 !important;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; */
}
.sidebar {
grid-area: sidebar;
margin-left: auto;
}
.content {
grid-area: content;
article {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: auto 150px 1fr auto;
}
.header {
grid-area: header;
header {
padding: 1rem;
border-bottom: 1px solid;
border-color: #d6d6d6;
padding: 10px;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 1;
}
.footer {
grid-area: footer;
background-color: #3e3232;
color: white;
padding: 10px;
header > div {
margin: 0 auto 0 auto;
width: 90%;
}
.wrapper {
display: grid;
grid-gap: 1em;
grid-template-areas:
"header"
"sidebar"
"content"
"footer"
#sidebar {
padding: 1rem;
margin-left: 70px;
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 2;
}
@media only screen and (min-width: 500px) {
.wrapper {
grid-template-columns: 20% auto;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
main {
padding: 1rem;
padding-left: 60px;
grid-column-start: 3;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 2;
}
footer {
background: black;
color: white;
padding: 1rem;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
@media only screen and (min-width: 600px) {
.wrapper {
grid-gap: 20px;
grid-template-columns: 100px auto;
grid-template-areas:
"header header header"
"sidebar content"
"footer footer footer";
}
footer > div {
margin: 0 auto 0 auto;
width: 90%;
}
.flex-container {
......@@ -68,9 +70,10 @@ body {
.flex-container > div {
background-color: #f1f1f1;
width: 200px;
width: 180px;
margin: 10px;
padding: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
line-height: 30px;
font-size: 20px;
}
......@@ -23,7 +23,7 @@ var demo = new Vue({
addProject: function () {
var newProject = {
name: this.project.name.trim(),
artist: this.artist.id
"artist.id": this.artist.id
};
axios
.post('http://127.0.0.1:8000/api/project/', newProject);
......@@ -42,8 +42,18 @@ var demo = new Vue({
},
mounted: function()
{
axios
.get('http://127.0.0.1:8000/api/artist/')
.then(response => (this.artist = response.data))
switch (window.location.pathname) {
case "/artists/":
case "/add/":
axios
.get('http://127.0.0.1:8000/api/artist/')
.then(response => (this.artist = response.data));
break;
case "/projects/":
axios
.get('http://127.0.0.1:8000/api/project/')
.then(response => (this.project = response.data));
break;
};
}
});
......@@ -12,4 +12,5 @@
</div>
</div>
</div>
{% endblock %}
......@@ -4,27 +4,39 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon" />
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<title>[[ apptitle ]]</title>
<title>openArt</title>
</head>
<body>
<div id="app" class="wrapper">
<article id="app">
<header>
<div>
<b><a href="/">[[ apptitle ]]</a></b>
<br>
<small>Tech demo 0.1</small>
</div>
</header>
<div id="sidebar">
<a href="/artists">Artists</a><br>
<a href="/projects">Projects</a><br>
<a href="/entries">Entries</a><br><br>
<a href="/add">Add</a><br>
</div>
<main>
{% block jobs %}
{% endblock %}
</main>
<footer>
<div>
openArt
<br>
<small>Tech demo 0.1</small>
</div>
</footer>
</article>
<div class="box header"><a href="/">[[ apptitle ]]</a></div>
<div class="box sidebar">
<a href="/artists">Artists</a><br>
<a href="/projects">Projects</a><br>
<a href="/entries">Entries</a><br><br>
<a href="/add">Add</a><br>
</div>
<div class="box content">
{% block jobs %}
{% endblock %}
</div>
<div class="box footer">Footer</div>
</div>
<!-- <script type="text/javascript" src="{% static 'js/vue-2.6.10.min.js' %}"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
......
......@@ -7,7 +7,8 @@
<div v-for="(project, index) in project" class="project">
<div class="col-sm-12">
<img src="https://uploads.wikiart.org/Content/images/ARTIST-480x600.jpg" width=100px>
<h3>[[ project.projectname ]]</h3>
<br><b>[[ project.name ]]</b><br>
by [[ project.artist.name ]]<br>
<button class="btn" v-on:click="removeProject([[ index ]])">Delete</button>
</div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment