Commit 9c17166f authored by kliger's avatar kliger

Improve manage layout design, manage navbar design, management page design and...

Improve manage layout design, manage navbar design, management page design and create quiz form design. Change text to Hebrew
parent b298e335
<head>
<title>we-start</title>
<title>שבלול</title>
<link rel="shortcut icon" sizes="16x16" href="/../img/quiz-default.png">
<link rel="stylesheet" href="/libs/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/libs/bootstrap/css/bootstrap-rtl.min.css">
<link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css">
......
......@@ -27,3 +27,6 @@
.clickable {
cursor: pointer;
}
body {
background-color: #f5f5f5 !important;
}
......@@ -10,7 +10,7 @@ const validateTitle = (title) => {
{
fields: ['title'],
},
err => (message = err && err.reason),
err => message = err && err.reason,
);
return message;
};
......@@ -19,84 +19,96 @@ const QuizForm = ({ quiz, validate, actions }) => {
const titleValidation = validate && validateTitle(quiz.title);
return (
<div id="quiz-form">
<h1>צור שאלון</h1>
<div className="row">
<div className="col-sm-12">
<div className="page-header">
<div className={`form-group ${titleValidation ? 'has-error' : ''}`}>
<input
name="title"
className="input-title form-control"
placeholder="כותרת שאלון"
value={quiz.title}
onChange={actions.changeQuizTitle}
/>
{titleValidation
? <label className="control-label" htmlFor="title">{titleValidation}</label>
: ''}
<div className="panel panel-default">
<div className="panel-body">
<div className="">
<div
className={`form-group ${titleValidation ? 'has-error' : ''}`}
>
<input
name="title"
className="input-title form-control"
placeholder="כותרת שאלון"
value={quiz.title}
onChange={actions.changeQuizTitle}
/>
{titleValidation
? <label className="control-label" htmlFor="title">
{titleValidation}
</label>
: ''}
</div>
</div>
</div>
</div>
</div>
{quiz.questions.map(q =>
{quiz.questions.map(q => (
<div key={q._id} className="row">
<div className="col-sm-12">
<QuestionForm question={q} validate={validate} actions={actions} />
</div>
</div>,
)}
<div className="row">
<div className="col-sm-12">
<button className="btn btn-primary btn-lg btn-block" onClick={actions.addQuestion}>
<span className="glyphicon glyphicon-plus" aria-hidden="true" />
</button>
<QuestionForm question={q} validate={validate} actions={actions} />
</div>
))}
<div className="row" id="add-question-btn-row">
<button className="btn btn-lg btn-block" onClick={actions.addQuestion}>
<span className="glyphicon glyphicon-plus" aria-hidden="true" />
<span> הוסף שאלה</span>
</button>
</div>
<hr />
<div className="row">
<div className="col-sm-9">
<div className="row">
<div className="col-lg-4">
<form onSubmit={actions.addTag}>
<label htmlFor="tag" className="control-label">
הוספת תגיות
</label>
<input name="tag" className="form-control input-lg" />
</form>
<div className="panel panel-default">
<div className="panel-body" id="submit-panel">
<div className="row">
<div className="col-md-9">
<div className="row">
<div className="col-md-4">
<form onSubmit={actions.addTag}>
<label htmlFor="tag" className="control-label">
הוספת תגיות
</label>
<input name="tag" className="form-control input-lg" />
</form>
</div>
<div className="col-md-8">
{quiz.tags.map(t => (
<TagTemplate key={t._id} tag={t} actions={actions} />
))}
</div>
</div>
</div>
<div className="col-md-3">
<div className="form-group-lg">
<label htmlFor="isPrivate" className="control-label">
מי יכול למצוא את השאלון
</label>
<select
name="isPrivate"
className="is-private form-control"
onChange={actions.changeQuizPrivacy}
>
<option value="false">כולם</option>
<option value="true">רק אני</option>
</select>
</div>
</div>
</div>
<div className="col-lg-8">
{quiz.tags.map(t => <TagTemplate key={t._id} tag={t} actions={actions} />)}
<div className="row">
<button
id="quiz-form-submit"
className="btn btn-success btn-lg"
onClick={actions.saveQuiz}
>
<span className="glyphicon glyphicon-ok" aria-hidden="true" />
</button>
</div>
</div>
</div>
<div className="col-sm-3">
<div className="form-group-lg">
<label htmlFor="isPrivate" className="control-label">
מי יכול למצוא את השאלון
</label>
<select
name="isPrivate"
className="is-private form-control"
onChange={actions.changeQuizPrivacy}
>
<option value="false">כולם</option>
<option value="true">רק אני</option>
</select>
</div>
</div>
</div>
<hr />
<div className="row">
<div className="col-sm-12">
<button className="btn btn-success btn-lg col-sm-2 pull-left" onClick={actions.saveQuiz}>
<span className="glyphicon glyphicon-ok" aria-hidden="true" />
</button>
</div>
</div>
</div>
);
};
const TagTemplate = ({ tag, actions }) =>
const TagTemplate = ({ tag, actions }) => (
<h3 className="pull-right tag">
<span
className="label label-info clickable"
......@@ -105,6 +117,7 @@ const TagTemplate = ({ tag, actions }) =>
>
{tag.name}
</span>
</h3>;
</h3>
);
export default QuizForm;
......@@ -19,7 +19,7 @@ const Leaders = ({ game }) => {
</div>
: ''}
<div className="row">
<GameNavbar text="Leaders" num="" />
<GameNavbar text="צמרת הטבלה" num="" />
</div>
<div className="row">
<table className="table leaders-table">
......
......@@ -20,7 +20,7 @@ const Winner = ({ game }) => {
</div>
</div>
<div className="row">
<GameNavbar text="Winner" num="" />
<GameNavbar text="הזוכה הגדול" num="" />
</div>
<div className="row">
<div className="winner-name">
......
......@@ -57,7 +57,7 @@ class Main extends React.Component {
};
return (
<div id="quiz-management-main">
<div className="tab-btns btn-pref btn-group btn-group-justified btn-group-lg" role="group">
<div className="tab-btns btn-pref btn-group btn-group-justified btn-group-lg" id="tabs-area" role="group">
<div className="btn-group" role="group">
<button
className={`btn ${activeTab === tabNames.myQuizes ? 'btn-primary' : 'btn-default'}`}
......
......@@ -5,4 +5,7 @@
.panel-heading>.form-group{
margin-bottom: 0;
}
.panel {
border-width: 1px;
}
}
......@@ -36,4 +36,5 @@
width: 50px;
margin-top: -10px;
}
border: none !important;
}
\ No newline at end of file
#quiz-form {
input.input-title {
height: 80px;
height: 60px;
padding: 13px 16px;
font-size: 36px;
font-size: 26px;
}
input.input-title:focus {
outline:none;
}
.question-form {
.form-horizontal .form-group {
margin-left: inherit;
margin-left: inherit;
margin-right: inherit;
margin-top: 5px;
}
.panel-heading {
border-bottom: 1px solid #e2e2e2;
background-color: #fff;
}
.panel-body {
.form-group {
margin-top: 5px;
}
}
}
.tag {
margin: 10px;
}
.form-group {
margin-top: 0;
margin-bottom: 0;
}
#add-question-btn-row {
margin-bottom: 15px;
button {
background-color: #fff;
border: solid 1px #158cba;
color: #158cba;
}
}
#quiz-form-submit {
width: 100%;
margin-top: 15px;
}
#submit-panel {
padding-bottom: 0;
}
}
......@@ -66,4 +66,35 @@
color: gray;
}
}
#tabs-area {
position: fixed;
right: 0;
left: 0;
width: 100%;
top: 52px;
z-index: 1;
.btn {
margin: 0;
border-width: 1px;
&:hover {
margin: 0;
border-width: 1px;
}
}
.btn-default {
background-color: #fff;
color: #127ba3;
border-color: #127ba3;
&:hover {
background-color: #fff;
color: #127ba3;
border-color: #127ba3;
}
&:focus {
background-color: #fff;
color: #127ba3;
border-color: #127ba3;
}
}
}
}
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