m3l1nd4

// Displaying Modal to Enlarge Image
$$(document).on('click', '.enlarge-image', function () {
  const newCommentBtn = document.querySelector('#new-comment');
  const modal = document.querySelector('#enlarge-image');
  const modalImage = document.querySelector('#modal-image');
  const span = document.getElementsByClassName('close')[0];

  newCommentBtn.classList.add('display');
  modal.style.display = "block";
  modalImage.src = this.src;

m3l1nd4

// Display Text When There Is No Thread/Comment Added
const noContent = (title, text) => {
  return `
    <div class="card-content card-content-padding">
      <div class="item-subtitle">${title}</div>    
      <p class="date" id="text">${text}</p>
    </div>
  `;
}

m3l1nd4

// Setting Up The Thread Details
const setUpThreadDetails = (id) => {
  db.collection('threads')
    .where(firebase.firestore.FieldPath.documentId(), "==", id)
    .get()
    .then((snapshot) => {
      snapshot.docs.forEach((doc) => {
        const thread = doc.data();
        document.getElementById("thread-title").innerText = thread.title;
        document.getElementById("thread-description").innerText = thread.description;

m3l1nd4

.material-icons.md-18 { 
  font-size: 18px; 
}

.size-18 { 
  font-size: 18px 
}

.material-icons.md-15 { 
  font-size: 15px; 

m3l1nd4

const $$ = Dom7;

const app = new Framework7({
  root: '#app', // App Root Element
  name: 'framework7-core-tab-view', // App Name
  theme: 'auto', // Automatic Theme Detection

  data: function () {
    return {
      // App Root Data

m3l1nd4

const threadsList = document.querySelector('.threads');
const signedInLinks = document.querySelectorAll('.signed-in');
const signedOutLinks = document.querySelectorAll('.signed-out');

const setUpUI = (user) => {
  if (user) {
    // Toggle UI Elements
    signedInLinks.forEach(item => item.style.display = 'inline');
    signedOutLinks.forEach(item => item.style.display = 'none');
  } else {

m3l1nd4

// Display Thread/Comment Image
const displayImage = (folder, id, element, background) => {
  const ref = firebase.storage().ref(folder);
  const name = id + '.jpg';

  ref.child(name)
    .getDownloadURL()
    .then(url => {
      (background)
        ? document.getElementById(element).style.backgroundImage = 'url(' + url + ')'

m3l1nd4

// Delete Thread/Comment Image
const deleteImage = (folder, id) => {
  const ref = firebase.storage().ref(folder).child(id + '.jpg');
  // Delete the file
  ref.delete();
}

m3l1nd4

<script>
  return {
    on: {
      pageInit: function (e, page) {
        const newCommentBtn = document.querySelector('#new-comment');

        // Toggle UI Element
        auth.onAuthStateChanged(user => {
          (user)
            ? newCommentBtn.classList.remove('display')

m3l1nd4

<script>
  return {
    on: {
      pageInit: function (e, page) {
        signUp();
      }
    }
  }
</script>