YashDeshpande
/
Forms_Laravel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI Changes

This commit is contained in:
yash 2024-07-24 11:43:50 +05:30
parent 0d8c522732
commit 128fac86ac
4 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/css/app.css
View File

@ -6,6 +6,10 @@
background-color: #fff; background-color: #fff;
} }
input:focus, textarea:focus, select:focus{
outline: none;
}
#moveableDiv { #moveableDiv {
transition: transform 1s ease; transition: transform 1s ease;
} }

6
public/js/script.js
View File

@ -55,15 +55,15 @@ document.addEventListener("DOMContentLoaded", function () {
const newQuestionDiv = document.createElement("div"); const newQuestionDiv = document.createElement("div");
// newQuestionDiv.className = "question"; // newQuestionDiv.className = "question";
newQuestionDiv.innerHTML = ` newQuestionDiv.innerHTML = `
<div class="question mb-4 p-4 border rounded bg-white"> <div class="question mb-4 p-4 border rounded bg-white shadow-sm">
<select class="form-control question_type mb-1" onchange="changeQuestionType(this)"> <select class="form-control question_type mb-1" onchange="changeQuestionType(this)">
<option value="">Select Question Type</option> <option style="border:1px solid rgb(103,58,183);" value="">Select Question Type</option>
<option value="multiple_choice">Multiple Choice</option> <option value="multiple_choice">Multiple Choice</option>
<option value="checkbox">Checkbox</option> <option value="checkbox">Checkbox</option>
<option value="dropdown">Dropdown</option> <option value="dropdown">Dropdown</option>
<option value="text">Text</option> <option value="text">Text</option>
</select> </select>
<input type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" /> <input style="border:none; border-bottom: 2px solid rgb(103,58,183); border-radius:0" type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" />
<div class="options-container mb-3"> <div class="options-container mb-3">
</div> </div>

8
resources/views/forms/create.blade.php
View File

@ -48,21 +48,21 @@
<div class="section"> <div class="section">
<div class="question_title_section mb-4"> <div class="question_title_section mb-4">
<div style="border-bottom:5px; border-radius:5px;" class="question_form_top shadow-sm"> <div style="border-bottom:5px; border-radius:5px;" class="question_form_top shadow-sm">
<input type="text" id="form-title" name="title" value="{{ $data['title'] ?? '' }}" class="form-control form-control-lg p-2 mb-2" placeholder="Untitled Form" /> <input style="border: none; border-bottom:2px solid rgb(103,58,183); border-radius:0" type="text" id="form-title" name="title" value="{{ $data['title'] ?? '' }}" class="form-control form-control-lg p-2 mb-2" placeholder="Untitled Form" />
<input type="text" name="description" id="form-description" value="{{ $data['description'] ?? '' }}" class="form-control form-control-sm" placeholder="Form Description" /> <input style="border: none; outline:none; border-bottom:2px solid rgb(103,58,183); border-radius:0" type="text" name="description" id="form-description" value="{{ $data['description'] ?? '' }}" class="form-control form-control-sm" placeholder="Form Description" />
</div> </div>
</div> </div>
</div> </div>
<div class="section" id="questions_section"> <div class="section" id="questions_section">
<div class="question mb-4 p-4 border rounded bg-white shadow-sm"> <div class="question mb-4 p-4 border rounded bg-white shadow-sm">
<select class="form-control question_type mb-1" onchange="changeQuestionType(this)"> <select class="form-control question_type mb-1" onchange="changeQuestionType(this)">
<option value="">Select Question Type</option> <option style="border:1px solid rgb(103,58,183);" value="">Select Question Type</option>
<option value="multiple_choice">Multiple Choice</option> <option value="multiple_choice">Multiple Choice</option>
<option value="checkbox">Checkbox</option> <option value="checkbox">Checkbox</option>
<option value="dropdown">Dropdown</option> <option value="dropdown">Dropdown</option>
<option value="text">Text</option> <option value="text">Text</option>
</select> </select>
<input type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" /> <input style="border:none; border-bottom: 2px solid rgb(103,58,183); border-radius:0" type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" />
<div class="options-container mb-3"> <div class="options-container mb-3">
</div> </div>

14
resources/views/forms/show.blade.php
View File

@ -39,26 +39,26 @@
<div class="section"> <div class="section">
<div class="question_title_section mb-4"> <div class="question_title_section mb-4">
<div class="question_form_top"> <div class="question_form_top">
<input type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" style="color: black" placeholder="Untitled Form" value="{{ $form->title }}" readonly /> <input style="background-color: white; border:none; border-bottom: 2px solid rgb(103,58,183); border-radius:0;" type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" style="color: black" placeholder="Untitled Form" value="{{ $form->title }}" readonly />
<input type="text" name="description" id="form-description" class="form-control form-control-sm" style="color: black" placeholder="Form Description" value="{{ $form->description }}" readonly /> <input style="background-color: white; border:none; border-bottom: 2px solid rgb(103,58,183); border-radius:0;" type="text" name="description" id="form-description" class="form-control form-control-sm" style="color: black" placeholder="Form Description" value="{{ $form->description }}" readonly />
</div> </div>
</div> </div>
</div> </div>
<div class="section" id="questions_section"> <div class="section shadow-sm" id="questions_section">
@foreach ($form->questions as $index => $question) @foreach ($form->questions as $index => $question)
<div class="question mb-4 p-4 border rounded bg-white"> <div class="question mb-4 p-4 border rounded bg-white shadow-sm">
<select class="form-control question_type mb-3" name="questions[{{ $index }}][type]" onchange="changeQuestionType(this)" disabled> <select style="background-color: white; color:bLack;" class="form-control question_type mb-3" name="questions[{{ $index }}][type]" onchange="changeQuestionType(this)" disabled>
<option value="multiple_choice" {{ $question->type === 'multiple_choice' ? 'selected' : '' }}>Multiple Choice</option> <option value="multiple_choice" {{ $question->type === 'multiple_choice' ? 'selected' : '' }}>Multiple Choice</option>
<option value="checkbox" {{ $question->type === 'checkbox' ? 'selected' : '' }}>Checkbox</option> <option value="checkbox" {{ $question->type === 'checkbox' ? 'selected' : '' }}>Checkbox</option>
<option value="dropdown" {{ $question->type === 'dropdown' ? 'selected' : '' }}>Dropdown</option> <option value="dropdown" {{ $question->type === 'dropdown' ? 'selected' : '' }}>Dropdown</option>
<option value="text" {{ $question->type === 'text' ? 'selected' : '' }}>Text</option> <option value="text" {{ $question->type === 'text' ? 'selected' : '' }}>Text</option>
</select> </select>
<input type="text" name="questions[{{ $index }}][text]" class="form-control question-input mb-3" placeholder="Type your question here" value="{{ $question->question_text }}" readonly /> <input style="background-color: white; color:bLack;" type="text" name="questions[{{ $index }}][text]" class="form-control question-input mb-3" placeholder="Type your question here" value="{{ $question->question_text }}" readonly />
@if ($question->options) @if ($question->options)
<div class="options-container mb-3"> <div class="options-container mb-3">
@foreach (json_decode($question->options) as $optionIndex => $option) @foreach (json_decode($question->options) as $optionIndex => $option)
<div class="option d-flex align-items-center mb-2"> <div class="option d-flex align-items-center mb-2">
<input type="text" name="questions[{{ $index }}][options][{{ $optionIndex }}]" class="form-control option-input" placeholder="Option" value="{{ $option }}" readonly /> <input style="background-color: white; color:bLack;" type="text" name="questions[{{ $index }}][options][{{ $optionIndex }}]" class="form-control option-input" placeholder="Option" value="{{ $option }}" readonly />
</div> </div>
@endforeach @endforeach
</div> </div>