committed
This commit is contained in:
parent
7156b3e8d2
commit
fd2250fdc1
|
@ -40,7 +40,7 @@ class Form_controller extends CI_Controller
|
|||
$this->load->model('Frontend_model');
|
||||
$this->Frontend_model->deleteForm($id);
|
||||
$this->session->set_flashdata('status', 'Form data deleted successfully');
|
||||
redirect('home');
|
||||
redirect('drafts');
|
||||
}
|
||||
public function __construct()
|
||||
{
|
||||
|
|
|
@ -12,9 +12,37 @@
|
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
|
||||
<!-- Add SweetAlert CSS and JS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<style>
|
||||
.form-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-title,
|
||||
.form-description {
|
||||
border: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-title:focus,
|
||||
.form-description:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
border-bottom: 1px solid #007bff;
|
||||
}
|
||||
</style>
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-custom">
|
||||
<div class="container">
|
||||
|
@ -69,8 +97,8 @@
|
|||
<div class="container">
|
||||
<div class="form-header">
|
||||
<!-- <button id="preview-btn" class="btn btn-info"><i class="fas fa-eye"></i></button> -->
|
||||
<input type="text" id="form-title" class="form-control" value="<?php echo $form['title']; ?>">
|
||||
<input type="text" id="form-description" class="form-control" value="<?php echo $form['description']; ?>">
|
||||
<input type="text" id="form-title" class="form-control form-title" value="<?php echo $form['title']; ?>">
|
||||
<input type="text" id="form-description" class="form-control form-description" value="<?php echo $form['description']; ?>">
|
||||
<button id="add-section-btn" class="btn btn-primary">+</button>
|
||||
</div>
|
||||
<div id="form-container">
|
||||
|
@ -157,46 +185,56 @@
|
|||
|
||||
function createFormSection() {
|
||||
var sectionHtml = `
|
||||
<div class="form-section" data-type="">
|
||||
<div class="header-row">
|
||||
<input type = "text" class="form-control untitled-question" placeholder="Untitled Question" rows="1">
|
||||
<select class="custom-select">
|
||||
<option value="short-answer">Short Answer</option>
|
||||
<option value="paragraph">Paragraph</option>
|
||||
<option value="multiple-choice">Multiple Choice</option>
|
||||
<option value="checkboxes">Checkboxes</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
</select>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="required-toggle">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
|
||||
<div class="form-section" data-type="">
|
||||
<div class="header-row">
|
||||
<input type="text" class="form-control untitled-question" placeholder="Untitled Question" rows="1">
|
||||
<select class="custom-select">
|
||||
<option value="short-answer">Short Answer</option>
|
||||
<option value="paragraph">Paragraph</option>
|
||||
<option value="multiple-choice">Multiple Choice</option>
|
||||
<option value="checkboxes">Checkboxes</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
</select>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="required-toggle">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
|
||||
</div>
|
||||
<div class="options-container"></div>
|
||||
<button class="btn btn-primary add-option-btn">Add Option</button>
|
||||
</div>
|
||||
<div class="options-container"></div>
|
||||
<button class="btn btn-primary add-option-btn">Add Option</button>
|
||||
</div>
|
||||
`;
|
||||
`;
|
||||
$('#form-container').append(sectionHtml);
|
||||
positionAddSectionButton();
|
||||
|
||||
// Add click event for the newly created section
|
||||
$('.form-section').last().on('click', function () {
|
||||
$('.form-section').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
activeSection = $(this);
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
positionAddSectionButton();
|
||||
}
|
||||
|
||||
// Handle option button click
|
||||
$(document).on('click', '.add-option-btn', function () {
|
||||
var $section = $(this).closest('.form-section');
|
||||
var optionHtml = `
|
||||
<div class="option">
|
||||
<input type="text" class="form-control option-label" value="">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
<div class="option">
|
||||
<input type="text" class="form-control option-label" value="">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
$section.find('.options-container').append(optionHtml);
|
||||
});
|
||||
|
||||
// Handle delete section button click
|
||||
$(document).on('click', '.delete-section-icon', function () {
|
||||
$(this).closest('.form-section').remove();
|
||||
activeSection = null;
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
// Handle delete option button click
|
||||
|
@ -204,11 +242,8 @@
|
|||
$(this).closest('.option').remove();
|
||||
});
|
||||
|
||||
// Handle preview button click
|
||||
$('#preview-btn').on('click', function () {
|
||||
alert('Preview functionality is not implemented.');
|
||||
});
|
||||
$('.form-section').each(function () {
|
||||
|
||||
$('.form-section').each(function () {
|
||||
$(this).on('click', function () {
|
||||
$('.form-section').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
@ -222,79 +257,101 @@
|
|||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
// Handle submit button click
|
||||
$('#submit-btn').on('click', function () {
|
||||
var formData = collectFormData();
|
||||
formData['form_id'] = <?php echo $form['id']; ?>;
|
||||
$(document).ready(function () {
|
||||
var base_url = '<?php echo base_url(); ?>';
|
||||
|
||||
let validation = validateFormData(formData);
|
||||
if (!validation.isValid) {
|
||||
alert(validation.message);
|
||||
return;
|
||||
}
|
||||
$('#submit-btn').on('click', function () {
|
||||
var formData = collectFormData();
|
||||
formData['form_id'] = <?php echo $form['id']; ?>;
|
||||
|
||||
$.ajax({
|
||||
url: base_url + 'Form_controller/update_form',
|
||||
type: 'POST',
|
||||
data: { formData: formData },
|
||||
dataType: 'JSON',
|
||||
success: function (response) {
|
||||
if (response.status === 'success') {
|
||||
alert('Form updated successfully!');
|
||||
let validation = validateFormData(formData);
|
||||
if (!validation.isValid) {
|
||||
alert(validation.message);
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: base_url + 'Form_controller/update_form',
|
||||
type: 'POST',
|
||||
data: { formData: formData },
|
||||
dataType: 'JSON',
|
||||
success: function (response) {
|
||||
if (response.status === 'success') {
|
||||
Swal.fire({
|
||||
title: 'Success!',
|
||||
text: 'Form updated successfully!',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'OK'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
window.location.href = base_url + 'drafts';
|
||||
} else {
|
||||
alert(response.message);
|
||||
}
|
||||
},
|
||||
error: function (error) {
|
||||
alert('Error updating form!');
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: response.message,
|
||||
icon: 'error',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function (error) {
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: 'Error updating form!',
|
||||
icon: 'error',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Collect form data function
|
||||
function collectFormData() {
|
||||
var formData = {
|
||||
title: $('#form-title').val(),
|
||||
description: $('#form-description').val(),
|
||||
questions: []
|
||||
};
|
||||
|
||||
$('.form-section').each(function () {
|
||||
var questionData = {
|
||||
id: $(this).data('index'),
|
||||
text: $(this).find('.untitled-question').val(),
|
||||
type: $(this).find('.custom-select').val(),
|
||||
required: $(this).find('.required-toggle').is(':checked') ? 1 : 0,
|
||||
options: []
|
||||
};
|
||||
|
||||
$(this).find('.option-label').each(function () {
|
||||
questionData.options.push($(this).val());
|
||||
});
|
||||
|
||||
// Collect form data function
|
||||
function collectFormData() {
|
||||
var formData = {
|
||||
title: $('#form-title').val(),
|
||||
description: $('#form-description').val(),
|
||||
questions: []
|
||||
};
|
||||
formData.questions.push(questionData);
|
||||
});
|
||||
|
||||
$('.form-section').each(function () {
|
||||
var questionData = {
|
||||
id: $(this).data('index'),
|
||||
text: $(this).find('.untitled-question').val(),
|
||||
type: $(this).find('.custom-select').val(),
|
||||
required: $(this).find('.required-toggle').is(':checked') ? 1 : 0, // Correctly capture the required value
|
||||
options: []
|
||||
};
|
||||
return formData;
|
||||
}
|
||||
|
||||
$(this).find('.option-label').each(function () {
|
||||
questionData.options.push($(this).val());
|
||||
});
|
||||
|
||||
formData.questions.push(questionData);
|
||||
});
|
||||
|
||||
return formData;
|
||||
function validateFormData(formData) {
|
||||
for (let question of formData.questions) {
|
||||
if (!question.text.trim()) {
|
||||
return { isValid: false, message: 'All questions must have text.' };
|
||||
}
|
||||
function validateFormData(formData) {
|
||||
for (let question of formData.questions) {
|
||||
if (!question.text.trim()) {
|
||||
return { isValid: false, message: 'All questions must have text.' };
|
||||
}
|
||||
if ((question.type === 'multiple-choice' || question.type === 'checkboxes' || question.type === 'dropdown') && question.options.length === 0) {
|
||||
return { isValid: false, message: 'All options-based questions must have at least one option.' };
|
||||
}
|
||||
for (let option of question.options) {
|
||||
if (!option.trim()) {
|
||||
return { isValid: false, message: 'All options must have text.' };
|
||||
}
|
||||
}
|
||||
if ((question.type === 'multiple-choice' || question.type === 'checkboxes' || question.type === 'dropdown') && question.options.length === 0) {
|
||||
return { isValid: false, message: 'All options-based questions must have at least one option.' };
|
||||
}
|
||||
for (let option of question.options) {
|
||||
if (!option.trim()) {
|
||||
return { isValid: false, message: 'All options must have text.' };
|
||||
}
|
||||
return { isValid: true };
|
||||
}
|
||||
}
|
||||
return { isValid: true };
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize
|
||||
|
||||
|
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
if (isRequired && !isAnswered) {
|
||||
container.style.border = '2px solid purple';
|
||||
container.style.border = '2px solid red';
|
||||
isValid = false;
|
||||
} else {
|
||||
container.style.border = 'none';
|
||||
|
|
|
@ -1,17 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Responses List</title>
|
||||
<link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<style>
|
||||
.username-column {
|
||||
color: darkblue; /* Dark blue color for title */
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt-4">
|
||||
|
|
|
@ -12,4 +12,100 @@
|
|||
],
|
||||
"order": [[1, "desc"]] // Default sort by "Filled At" column (index 1) in descending order
|
||||
});
|
||||
$(document).ready(function() {
|
||||
// Fade out flash messages after 2 seconds
|
||||
setTimeout(function() {
|
||||
$('.flash-message').fadeOut(1000);
|
||||
}, 600);
|
||||
});
|
||||
$(document).ready(function() {
|
||||
// Fade out flash messages after 2 seconds
|
||||
setTimeout(function() {
|
||||
$('#flash-messages .flash-message').fadeOut(1000);
|
||||
}, 2000);
|
||||
|
||||
// Example function to show validation messages
|
||||
function showError(fieldId, message) {
|
||||
$(`#${fieldId}-error`).text(message).show();
|
||||
}
|
||||
|
||||
// Example function to hide validation messages
|
||||
function clearError(fieldId) {
|
||||
$(`#${fieldId}-error`).text('').hide();
|
||||
}
|
||||
|
||||
// Registration form validation
|
||||
$('#register-form').submit(function(e) {
|
||||
e.preventDefault(); // Prevent default form submission
|
||||
|
||||
// Clear all previous errors
|
||||
clearError('username');
|
||||
clearError('email');
|
||||
clearError('password');
|
||||
clearError('password2');
|
||||
|
||||
// Validate fields
|
||||
let isValid = true;
|
||||
|
||||
// Example validation logic
|
||||
if ($('input[name="username"]').val().trim() === '') {
|
||||
showError('username', 'Username is required.');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if ($('input[name="email"]').val().trim() === '') {
|
||||
showError('email', 'Email is required.');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if ($('input[name="password"]').val().trim() === '') {
|
||||
showError('password', 'Password is required.');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if ($('input[name="password2"]').val().trim() === '') {
|
||||
showError('password2', 'Confirm Password is required.');
|
||||
isValid = false;
|
||||
} else if ($('input[name="password"]').val() !== $('input[name="password2"]').val()) {
|
||||
showError('password2', 'Passwords do not match.');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (isValid) {
|
||||
// Proceed with form submission
|
||||
this.submit();
|
||||
}
|
||||
});
|
||||
|
||||
// Login form validation
|
||||
$('#login-form').submit(function(e) {
|
||||
e.preventDefault(); // Prevent default form submission
|
||||
|
||||
// Clear all previous errors
|
||||
clearError('username');
|
||||
clearError('password');
|
||||
|
||||
// Validate fields
|
||||
let isValid = true;
|
||||
|
||||
// Example validation logic
|
||||
if ($('input[name="username"]').val().trim() === '') {
|
||||
showError('username', 'Username is required.');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if ($('input[name="password"]').val().trim() === '') {
|
||||
showError('password', 'Password is required.');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (isValid) {
|
||||
// Proceed with form submission
|
||||
this.submit();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
|
|
@ -9,6 +9,11 @@
|
|||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/jquery-ui.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
|
||||
|
||||
<style>
|
||||
.navbar-custom {
|
||||
background-color: rgb(103, 58, 183);
|
||||
|
@ -67,6 +72,8 @@
|
|||
<div id="form-container"></div>
|
||||
|
||||
<button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
|
||||
<a id="cancel-btn" class="btn btn-danger" href="<?php echo base_url(); ?>" style="margin-left: 8px; margin-top: 20px; display: inline-block;">Cancel</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
@ -10,12 +10,10 @@
|
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/jquery-ui.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.css">
|
||||
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
|
||||
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
@ -48,21 +46,20 @@
|
|||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<?php if ($this->session->flashdata('user_registered')): ?>
|
||||
<?php echo '<p class="alert alert-success">' . $this->session->flashdata('user_registered') . '</p>'; ?>
|
||||
<p class="alert alert-success flash-message" id="flash-user-registered"><?php echo $this->session->flashdata('user_registered'); ?></p>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->session->flashdata('login_failed')): ?>
|
||||
<?php echo '<p class="alert alert-danger">' . $this->session->flashdata('login_failed') . '</p>'; ?>
|
||||
<p class="alert alert-danger flash-message" id="flash-login-failed"><?php echo $this->session->flashdata('login_failed'); ?></p>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->session->flashdata('user_loggedin')): ?>
|
||||
<?php echo '<p class="alert alert-success">' . $this->session->flashdata('user_loggedin') . '</p>'; ?>
|
||||
<p class="alert alert-success flash-message" id="flash-user-loggedin"><?php echo $this->session->flashdata('user_loggedin'); ?></p>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->session->flashdata('user_loggedout')): ?>
|
||||
<?php echo '<p class="alert alert-success">' . $this->session->flashdata('user_loggedout') . '</p>'; ?>
|
||||
<p class="alert alert-success flash-message" id="flash-user-loggedout"><?php echo $this->session->flashdata('user_loggedout'); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,19 +1,21 @@
|
|||
<?php echo form_open('users/login/'.$form_id); ?>
|
||||
<?php echo form_open('users/login', ['id' => 'login-form']); ?>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<h1 class="text-center">
|
||||
<?php echo $title; ?>
|
||||
</h1>
|
||||
<div class="form-group">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<h1 class="text-center"><?= $title; ?></h1>
|
||||
|
||||
<input type = "text" name ="username" class="form-control" placeholder = "Enter Username" required autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type = "password" name ="password" class="form-control" placeholder = "Enter Password" required autofocus>
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<input type="text" class="form-control" name="username" placeholder="Username">
|
||||
<div id="username-error" class="text-danger"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<button type = "submit" class = "btn btn-primary btn-block">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" class="form-control" name="password" placeholder="Password">
|
||||
<div id="password-error" class="text-danger"></div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-block">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
<?php echo form_close(); ?>
|
||||
|
|
|
@ -1,27 +1,33 @@
|
|||
<?php echo validation_errors(); ?>
|
||||
<?php echo form_open('users/register'); ?>
|
||||
<?php echo form_open('users/register', ['id' => 'register-form']); ?>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<h1 class="text-center"><?= $title; ?></h1>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<input type=" text" class="form-control" name="username" placeholder="Username">
|
||||
<input type="text" class="form-control" name="username" placeholder="Username">
|
||||
<div id="username-error" class="text-danger"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type=" text" class="form-control" name="email" placeholder="Email">
|
||||
<input type="text" class="form-control" name="email" placeholder="Email">
|
||||
<div id="email-error" class="text-danger"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type=" password" class="form-control" name="password" placeholder="Password ">
|
||||
<input type="password" class="form-control" name="password" placeholder="Password">
|
||||
<div id="password-error" class="text-danger"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Confirm Password</label>
|
||||
<input type="password" class="form-control" name="password2" placeholder="Confirm Password ">
|
||||
<input type="password" class="form-control" name="password2" placeholder="Confirm Password">
|
||||
<div id="password2-error" class="text-danger"></div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-block">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<?php echo form_close(); ?>
|
||||
<?php echo form_close(); ?>
|
||||
|
|
|
@ -1,16 +1,22 @@
|
|||
body {
|
||||
background-color: rgb(240, 235, 248);
|
||||
margin: 0; /* Remove default margin */
|
||||
padding: 0; /* Remove default padding */
|
||||
font-family: Arial, sans-serif; /* Ensure a consistent font */
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 10px;
|
||||
padding: 0 10px; /* Add padding for smaller screens */
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background-color: white;
|
||||
width: 56%;
|
||||
max-width: 100%; /* Ensure it doesn't exceed the container width */
|
||||
margin-bottom: 30px;
|
||||
margin-left: 240px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
@ -22,7 +28,8 @@ body {
|
|||
background-color: white;
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 240px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 10px 10px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -32,6 +39,7 @@ body {
|
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-top: 10px solid rgb(103, 58, 183);
|
||||
width: 56%;
|
||||
max-width: 100%; /* Ensure it doesn't exceed the container width */
|
||||
}
|
||||
|
||||
.form-section h2 {
|
||||
|
@ -42,35 +50,41 @@ body {
|
|||
.form-section .question-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Navbar custom styles */
|
||||
.navbar-custom {
|
||||
background-color: rgb(103, 58, 183);
|
||||
color: white;
|
||||
border-radius: 0;
|
||||
border-radius: none;
|
||||
width: 100%; /* Ensure full width */
|
||||
display: flex;
|
||||
justify-content: space-between; /* Space items apart */
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
flex-wrap: wrap; /* Allow items to wrap on smaller screens */
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-brand>li>a {
|
||||
.navbar-custom .navbar-brand,
|
||||
.navbar-custom .navbar-nav > li > a {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s ease;
|
||||
padding: 10px;
|
||||
text-align: center; /* Center text */
|
||||
flex: 1; /* Allow items to grow/shrink to fill space */
|
||||
}
|
||||
.navbar-custom .navbar-nav>li>a{
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-brand:hover,
|
||||
.navbar-custom .navbar-nav>li>a:hover {
|
||||
.navbar-custom .navbar-nav > li > a:hover {
|
||||
color: white; /* Keep text color white on hover */
|
||||
text-decoration: none; /* Remove underline if present */
|
||||
}
|
||||
|
||||
|
||||
.navbar-nav>li>a {
|
||||
.navbar-nav > li > a {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-nav>li>a:hover {
|
||||
.navbar-nav > li > a:hover {
|
||||
color: white; /* Explicitly set text color on hover */
|
||||
}
|
||||
|
||||
|
@ -78,36 +92,55 @@ body {
|
|||
margin-top: 20px;
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 100%; /* Make submit button full width */
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.margin-bottom-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.padding-10 {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.post-date{
|
||||
background: #f4f4f4;
|
||||
padding: 4px;
|
||||
margin:3px 0;
|
||||
margin: 3px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.post-thumb{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination-link{
|
||||
margin:30px 0;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.pagination-links strong{
|
||||
padding: 8px 13px;
|
||||
margin:5px;
|
||||
margin: 5px;
|
||||
background: #f4f4f4;
|
||||
border: 1px #ccc solid;
|
||||
}
|
||||
|
||||
a.pagination-link{
|
||||
padding: 8px 13px;
|
||||
margin:5px;
|
||||
margin: 5px;
|
||||
background: #f4f4f4;
|
||||
border: 1px #ccc solid;
|
||||
}
|
||||
|
||||
.cat-delete{
|
||||
display:inline;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#basetable1 {
|
||||
border: 1px solid #3333336c; /* Darker border color */
|
||||
}
|
||||
|
@ -115,5 +148,50 @@ a.pagination-link{
|
|||
#basetable1 th, #basetable1 td {
|
||||
border: 1px solid #3333336c; /* Darker border color for table cells */
|
||||
}
|
||||
/* Custom DataTables pagination styles */
|
||||
|
||||
/* Media query for responsive design */
|
||||
@media (max-width: 1200px) {
|
||||
.form-header, .form-section {
|
||||
width: 75%; /* Adjust width for smaller screens */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-header, .form-section {
|
||||
width: 90%; /* Adjust width for smaller screens */
|
||||
}
|
||||
|
||||
.navbar-custom {
|
||||
flex-direction: column; /* Stack navbar items vertically */
|
||||
padding: 10px; /* Adjust padding for smaller screens */
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-brand,
|
||||
.navbar-custom .navbar-nav > li > a {
|
||||
font-size: 14px; /* Adjust font size for smaller screens */
|
||||
padding: 10px; /* Adjust padding for smaller screens */
|
||||
}
|
||||
|
||||
#submit-btn {
|
||||
width: 100%; /* Make submit button full width */
|
||||
float: none; /* Remove float */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 590px) {
|
||||
.form-header, .form-section {
|
||||
width: 100%; /* Adjust width for smaller screens */
|
||||
padding: 10px; /* Reduce padding for smaller screens */
|
||||
}
|
||||
|
||||
.navbar-custom {
|
||||
flex-direction: column; /* Stack navbar items vertically */
|
||||
padding: 5px; /* Adjust padding for smaller screens */
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-brand,
|
||||
.navbar-custom .navbar-nav > li > a {
|
||||
font-size: 14px; /* Adjust font size for smaller screens */
|
||||
padding: 10px; /* Adjust padding for smaller screens */
|
||||
}
|
||||
}
|
||||
|
|
|
@ -28,3 +28,9 @@ width: 65%; /* Or any specific width */
|
|||
padding: 0; /* Ensure no padding is affecting alignment */
|
||||
margin: 0 auto; /* Center the container if needed */
|
||||
}
|
||||
.question-label {
|
||||
display: inline; /* Ensure it displays inline rather than as a block */
|
||||
background: none; /* Remove any background color */
|
||||
margin: 0; /* Remove any margins if applied */
|
||||
padding: 0; /* Remove any padding if applied */
|
||||
}
|
||||
|
|
|
@ -114,14 +114,11 @@ body {
|
|||
|
||||
.custom-select {
|
||||
width: 220px;
|
||||
height: 45px;
|
||||
height: 39px;
|
||||
display: block;
|
||||
/* width: 100%; */
|
||||
/* height: 45px; */
|
||||
padding: 10px 15px;
|
||||
padding: -20px 15px;
|
||||
font-size: 15px;
|
||||
line-height: 1.42857143;
|
||||
/* color: #2c3e50; */
|
||||
background-color: #ffffff;
|
||||
background-image: none;
|
||||
border: 1px solid #dce4ec;
|
||||
|
@ -268,3 +265,16 @@ background-color: rgb(103, 58, 183);
|
|||
border-color: rgb(103, 58, 183);
|
||||
color: white;
|
||||
}
|
||||
.flash-message {
|
||||
opacity: 1;
|
||||
transition: opacity 1s ease-out;
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.error-message {
|
||||
color: red;
|
||||
font-size: 0.875em;
|
||||
margin-top: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -275,21 +275,47 @@ function addOption(type, container) {
|
|||
dataType: 'JSON',
|
||||
success: function(response) {
|
||||
if (response.status === 'success') {
|
||||
alert('Form submitted successfully!');
|
||||
// Redirect to Form_controller/index_forms
|
||||
window.location.href = base_url + 'Form_controller/index_forms';
|
||||
Swal.fire({
|
||||
title: 'Success!',
|
||||
text: 'Form submitted successfully!',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'OK'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
window.location.href = base_url + 'Form_controller/index_forms';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
alert(response.message);
|
||||
// console.log(response);
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: response.message,
|
||||
icon: 'error',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
console.log(response);
|
||||
}
|
||||
},
|
||||
error: function(error) {
|
||||
alert('Error submitting form!');
|
||||
window.location.href = base_url + 'Form_controller/index_forms';
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: 'Error submitting form!',
|
||||
icon: 'error',
|
||||
confirmButtonText: 'OK',
|
||||
width: '400px',
|
||||
height: '300px',
|
||||
padding: 'auto',
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
window.location.href = base_url + 'Form_controller/index_forms';
|
||||
}
|
||||
});
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$('#form-container').disableSelection();
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue